Open king0120 opened 3 years ago
Figured out the issue! Hopefully this post can help others that run into this problem. Unfortunately, the Amplify Console UI was no help and I was only able to diagnose and resolve this through the aws amplify
cli. When I ran aws amplify list-apps
I found that the "platform" key was "WEB_DYNAMIC". Updating this to "WEB" fixed the issue with deployment.
This is the exact command that fixed it. aws amplify update-app --app-id APP_ID --platform "WEB"
So while this does work to change the deploy script to what I need, it looks like on additional changes of my application the platform changes back to "WEB_DYNAMIC". There is nothing in that I can think of in my package.json that should toggle this. Can I get some feedback on this? I've attached the full package.json here
{
"name": "APP",
"version": "1.2.2",
"private": true,
"scripts": {
"nx": "nx",
"start": "nx serve",
"build": "nx build",
"test": "nx test",
"test:watch": "nx test:watch",
"test:all": "nx run-many --target=test --all",
"test:ci": "nx test --ci",
"test:silent": "react-scripts test --env=jsdom --silent",
"test:coverage": "react-scripts test --env=jsdom --coverage --watchAll=false",
"lint": "nx workspace-lint && nx lint",
"e2e": "nx e2e",
"analyze": "nx build --prod --stats-json && webpack-bundle-analyzer dist/apps/APP/stats.json",
"storybook:start": "start-storybook -p 6006 --no-dll",
"storybook:build": "build-storybook --no-dll",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write --uncommitted",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-generator": "nx workspace-generator",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"dependencies": {
"@agney/react-loading": "^0.1.2",
"@reduxjs/toolkit": "1.5.0",
"@styled-system/css": "^5.1.5",
"@tippyjs/react": "^4.2.0",
"@wojtekmaj/react-datetimerange-picker": "^3.2.0",
"aws-amplify": "^4.2.2",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"date-fns": "^2.21.2",
"formik": "^2.2.6",
"framer-motion": "^4.1.17",
"graphql-tag": "^2.12.5",
"history": "^5.0.0",
"imask": "^6.0.7",
"lodash-es": "^4.17.21",
"logrocket": "^1.0.14",
"logrocket-react": "^4.0.1",
"nprogress": "^0.2.0",
"react": "17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-click-away-listener": "^2.0.0",
"react-currency-format": "^1.0.0",
"react-dom": "17.0.2",
"react-dropzone": "^11.3.1",
"react-ga": "^3.3.0",
"react-infinite-scroll-component": "^6.1.0",
"react-modal": "^3.13.1",
"react-number-format": "^4.4.4",
"react-pdf": "^5.2.0",
"react-query": "^3.13.5",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-select": "^4.1.0",
"react-spring": "^8.0.27",
"react-table": "^7.6.3",
"react-toastify": "^7.0.4",
"react-use-intercom": "^1.1.9",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"redux": "4.0.5",
"regenerator-runtime": "0.13.7",
"simplebar-react": "^2.3.5",
"styled-components": "^5.2.1",
"styled-system": "^5.1.5",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"xlsx": "^0.16.9",
"yup": "^0.32.9",
"zustand": "^3.4.1"
},
"devDependencies": {
"@arkweid/lefthook": "^0.7.5",
"@babel/core": "7.12.13",
"@babel/helper-builder-react-jsx-experimental": "^7.12.11",
"@babel/preset-env": "^7.13.15",
"@babel/preset-react": "7.12.13",
"@babel/preset-typescript": "7.12.13",
"@nrwl/cli": "12.7.2",
"@nrwl/cypress": "12.7.2",
"@nrwl/eslint-plugin-nx": "12.7.2",
"@nrwl/jest": "12.7.2",
"@nrwl/linter": "12.7.2",
"@nrwl/nx-cloud": "12.3.10",
"@nrwl/react": "12.7.2",
"@nrwl/storybook": "12.7.2",
"@nrwl/tao": "12.7.2",
"@nrwl/web": "12.7.2",
"@nrwl/workspace": "12.7.2",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.2",
"@size-limit/preset-small-lib": "^4.9.2",
"@storybook/addon-actions": "^6.1.17",
"@storybook/addon-essentials": "^6.1.17",
"@storybook/addon-knobs": "^6.1.11",
"@storybook/addon-links": "^6.1.17",
"@storybook/react": "^6.1.17",
"@storybook/theming": "^6.1.21",
"@svgr/webpack": "^5.4.0",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "11.2.6",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.6.3",
"@types/history": "^4.7.8",
"@types/jest": "26.0.8",
"@types/logrocket-react": "^3.0.0",
"@types/node": "14.14.33",
"@types/react": "17.0.3",
"@types/react-dom": "17.0.3",
"@types/react-modal": "^3.12.0",
"@types/react-pdf": "^5.0.2",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"@types/react-select": "^4.0.13",
"@types/react-table": "^7.0.28",
"@types/redux-mock-store": "^1.0.2",
"@types/resize-observer-browser": "^0.1.5",
"@types/styled-components": "^5.1.7",
"@types/styled-system": "^5.1.10",
"@types/webpack": "4.41.21",
"@types/yup": "^0.29.11",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.19.0",
"@welldone-software/why-did-you-render": "^6.2.0",
"axios-mock-adapter": "^1.19.0",
"babel-eslint": "10.x",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"cypress": "^6.0.1",
"dotenv": "10.0.0",
"eslint": "7.22.0",
"eslint-config-prettier": "^8.2.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "7.23.1",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-testing-library": "^3.10.1",
"jest": "27.0.3",
"jest-styled-components": "^7.0.4",
"jest-watch-typeahead": "^0.6.2",
"msw": "^0.33.0",
"prettier": "2.3.2",
"pretty-quick": "^3.1.0",
"react-is": "^17.0.1",
"react-select-event": "^5.2.0",
"react-test-renderer": "^17.0.1",
"redux-mock-store": "^1.5.4",
"size-limit": "^4.9.2",
"source-map-explorer": "^2.5.2",
"storybook-addon-styled-component-theme": "^2.0.0",
"stylelint": "^13.12.0",
"stylelint-a11y": "^1.2.3",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^21.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-prettier": "^1.2.0",
"stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "27.0.3",
"ts-node": "~9.1.1",
"type-fest": "^0.21.2",
"typescript": "~4.1.4",
"url-loader": "^3.0.0",
"web-vitals": "^1.1.1",
"webpack-bundle-analyzer": "^4.4.1"
}
}
Does anyone have a clue on why this might be happening? While I am now able to deploy, having to manually change my config every single day does not give a great dev experience. I'd be happy to take a stab at a PR to resolve it, but I don't know where to begin with the logic that controls that 'platform' value.
This article says:
The following is an example of the build script for a Next.js SSG app. The build script "next build && next export" indicates that the app supports only SSG pages.
It is not very explicit about whether the build script gives Amplify clarity between ssr and ssg, but it may be worth a try.
I'm experiencing a situation very similar to this and unfortunately haven't found a way around this either. I have a nextjs + storybook installation in the same repo, but I'm trying to set up amplify to deploy my storybook instance only.
It appears that something autodetects the nextjs framework and executes commands based on this. Checking the logs I see my storybook build occur followed by an unexpected "Starting SSR Build...", then a deployment of artifacts that seems to completely ignores my baseDirectory config, resulting in a nextjs page rather than the expected storybook page.
My setup explicitly has nextjs in the codebase so it doesn't fail like yours does, but shares the common problem that: 1) the app settings are being autoset to the nextjs framework with no easy way to change it, and 2) it seems to be running commands that aren't explicitly stated in amplify.yml.
Edit: I was able to get around the problem by switching to a mono repo structure and using monorepo configuration
You can initially trick the deployment into using SSR or SSG by adding a package.json into the app folder. That's how I set my app as a SSR app. The problem then is building a deployment with NX. I used the update-app command and switched it to web. That makes the build pass, but it incorrectly setups the project. I think WEB is meant for static apps, and when I redeployed the app after I updated to WEB it failed to create a cloudfront distribution and assign that distribution in the rewrites and redirects page.
Have the same issue, I always tried to change the platform to WEB but when is building the project it will change again to WEB_DYNAMIC and the framework will change to 'Next.js SSR'. I have a monorepo and it just work for one of the projects, the other project are switching automatic to SSR.
To get SSG working for my nextjs site I had to change the build
step in package.json
to next build && next export
to pin it to WEB
This article also indicates this auto-detection is hardcoded:
The build script next build && next export indicates that the app supports SSG pages only.
I'm not sure if this works to bypass WEB_DYNAMIC for non-nextjs apps in a nextjs directory
Facing the same or similar issue – trying to deploy storybook to its own app, using an NX monorepo. We're defining the app with platform: WEB
, which we can see in the AWS Amplify Console, but once the build starts Amplify changes the app to WEB_DYNAMIC
automatically.
Looking for workarounds right now – tried adding a dummy package.json
with a next build && next export
build script to the approot folder but that doesn't seem to have helped.
edit: Setting Framework
to React - Amplify
on the AWS::Amplify::Branch
seems to have solved our particular issue. I have no documentation to point to, I got the suggestion from this comment on another issue https://github.com/aws-amplify/amplify-hosting/issues/2042#issuecomment-880687625
Before opening, please confirm:
App Id
d2a2vhd02c1pv7
Region
us-east-2
Amplify Console feature
Deploy Step
Describe the bug
Within the past 2 days all of my Amplify builds have begun failing on the Deploy step. We are building just a Static React app through a Nx Monorepo (one application, many libraries), but amplify fails saying that it's looking for Next.js. The specific error message is
I cannot find any way to tell Amplify to treat my app just like a static application. In the General App Settings under framework, the entry is completely blank and uneditable.
Expected behavior
Amplify should be able to deploy a static react app and differentiate between that and a Next.js application.
Reproduction steps
Not 100% sure since we haven't changed our deployment process. We are using deploys on push to a branch on Gitlab with the build settings seen below. This flow has worked up until a day ago.
Build Settings
Additional information
No response