aws-amplify / amplify-cli

The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
Apache License 2.0
2.81k stars 821 forks source link

Amplify Pull is creating backend despite selecting "No" to "Are you planning on modifying this backend?" #9828

Open raffibag opened 2 years ago

raffibag commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Not applicable

Amplify Categories

hosting

Environment information

``` # Put output below this line System: OS: macOS 11.6 CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz Memory: 1.71 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Browsers: Chrome: 98.0.4758.102 Firefox: 97.0.1 Safari: 15.0 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/ui-react: ^2.5.0 => 2.5.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @babel/core: undefined () @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.35 @fortawesome/free-brands-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/react-fontawesome: ^0.1.14 => 0.1.14 @material-ui/core: ^4.12.2 => 4.12.2 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60 @mdi/js: ^6.1.95 => 6.1.95 @mdi/react: ^1.5.0 => 1.5.0 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^3.4.0 => 3.4.3 axios: ^0.21.1 => 0.21.4 (0.21.1) babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 bfj: undefined () bootstrap: ^4.4.1 => 4.6.0 braintree-web: ^3.76.4 => 3.85.2 cacache: undefined () cache-loader: undefined () ci-info: undefined () comment-json: undefined () compression: undefined () conf: undefined () content-type: undefined () cookie: undefined () css-loader: undefined () debug: undefined () devalue: undefined () escape-string-regexp: undefined () file-loader: undefined () find-cache-dir: undefined () find-up: undefined () firebase: ^9.1.1 => 9.6.6 firebase/analytics: undefined () firebase/app: undefined () firebase/app-check: undefined () firebase/auth: undefined () firebase/auth/cordova: undefined () firebase/auth/react-native: undefined () firebase/compat: undefined () firebase/compat/analytics: undefined () firebase/compat/app: undefined () firebase/compat/app-check: undefined () firebase/compat/auth: undefined () firebase/compat/database: undefined () firebase/compat/firestore: undefined () firebase/compat/functions: undefined () firebase/compat/messaging: undefined () firebase/compat/performance: undefined () firebase/compat/remote-config: undefined () firebase/compat/storage: undefined () firebase/database: undefined () firebase/firestore: undefined () firebase/firestore/lite: undefined () firebase/functions: undefined () firebase/messaging: undefined () firebase/messaging/sw: undefined () firebase/performance: undefined () firebase/remote-config: undefined () firebase/storage: undefined () formik: ^2.2.7 => 2.2.7 fresh: undefined () gzip-size: undefined () http-proxy: undefined () ignore-loader: undefined () imagemin-mozjpeg: ^9.0.0 => 9.0.0 imagemin-optipng: ^8.0.0 => 8.0.0 is-animated: undefined () is-docker: undefined () is-wsl: undefined () json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mobx: ^6.3.0 => 6.3.0 mobx-react: ^7.1.0 => 7.1.0 moment-timezone: ^0.5.33 => 0.5.33 nanoid: undefined () neo-async: undefined () next: 10.0.7 => 10.0.7 next-optimized-images: ^2.6.2 => 2.6.2 ora: undefined () paypal-checkout: ^4.0.328 => 4.0.328 postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () react: 17.0.1 => 17.0.1 (17.0.2) react-bootstrap: ^1.5.2 => 1.5.2 react-bootstrap/AbstractNav: undefined () react-bootstrap/AbstractNavItem: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionToggle: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardColumns: undefined () react-bootstrap/CardContext: undefined () react-bootstrap/CardDeck: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFile: undefined () react-bootstrap/FormFileInput: undefined () react-bootstrap/FormFileLabel: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/Jumbotron: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Media: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverContent: undefined () react-bootstrap/PopoverTitle: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/ResponsiveEmbed: undefined () react-bootstrap/Row: undefined () react-bootstrap/SafeAnchor: undefined () react-bootstrap/SelectableContext: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabContext: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/helpers: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/usePopperMarginModifiers: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-dom: 17.0.1 => 17.0.1 react-infinite-scroll-component: ^6.1.0 => 6.1.0 react-lines-ellipsis: ^0.15.0 => 0.15.0 react-responsive-carousel: ^3.2.19 => 3.2.19 react-slick: ^0.28.1 => 0.28.1 react-virtualized: ^9.22.3 => 9.22.3 recast: undefined () resolve-url-loader: undefined () sass: ^1.32.12 => 1.32.12 sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () slick-carousel: ^1.8.1 => 1.8.1 source-map: undefined () string-hash: undefined () strip-ansi: undefined () terser: undefined () text-table: undefined () thread-loader: undefined () unistore: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () xss: ^1.0.10 => 1.0.10 yup: ^0.32.9 => 0.32.9 npmGlobalPackages: @aws-amplify/cli: 7.6.21 npm: 6.14.12 ```

Describe the bug

Per the Amplify Docs here (https://docs.amplify.aws/cli/teams/multi-frontend/) as of Feb 21, 2022:

Use the amplify pull command to share the same Amplify backend across multiple frontends (e.g, a React and Android app). Users have an option to pull the entire backend definition (infrastructure templates and metadata) or only the metadata (e.g. the aws-exports.js or amplifyconfiguration.json file) required to connect to the backend. If you’re building a mobile and web app in separate repositories, the recommended workflow is to keep the backend definition (the amplify folder) in only one of the repositories and pull the metadata (the aws-exports.js or amplifyconfiguration.json file) in the second repository to connect to the same backend.

For over a year and a half I've pulled our backend using the above instructions, however, recently when pulling the backend the action has been creating an amplify folder containing cli.json and team-provider-info.json files.

Further, when attempting to deploy the standalone frontend to Amplify, it is failing on backend build (because it's attempting to create the backend - which I don't want). To resolve the issue, I must manually delete the amplify folder from the project.

Expected behavior

An amplify folder should not be generated on amplify pull if answering "No" to the question: Do you plan on modifying this backend?.

Reproduction steps

  1. Run amplify pull from a standalone frontend project
  2. Select AWS Profile when prompted: Select the authentication method you want to use:
  3. Select profile when prompted: Please choose the profile you want to use
  4. Select app when prompted: Which app are you working on?
  5. Select dev when prompted: Pick a backend environment
  6. Select Visual Studio Code when prompted: Choose your default editor
  7. Select javascript when prompted: Choose the type of app that you're building
  8. Select react when prompted: What javascript framework are you using?
  9. Source directory path: src
  10. Distribution directory path: build
  11. Build command: `npm run-script build
  12. Start commaned: npm run-script start

Note - at this stage, I'm receiving a * Failed to sync UI components error (<- this is also new)

  1. Answer No to Are you planning on modifying this backend?

On completing the above:

Added backend environment config object to your project.

Code Snippet

No response

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 2 years ago

Hi @raffibag 👋 thanks for raising this issue. Because it's related to the CLI commands, I'm going to transfer this issue over to the CLI repo for better support.

josefaidt commented 2 years ago

Hey @raffibag :wave: this is expected behavior. While the amplify/ folder is generated when we're choosing not to modify the backend it is a lightweight addition that contains information regarding the pulled app and environment, which enables us to later run amplify pull to keep our project in sync without also specifying the appId and envName. However, I do see in our docs where it mentions this will only create the aws-exports.js file where this does not appear to be the case.

Marking as a documentation issue 🙂 and I'm going to dig deeper into the amplify/hooks/ directory that is pulled

raffibag commented 2 years ago

Thank you, @chrisbonifacio and @josefaidt for the additional details. I appreciate the clarification!

raffibag commented 2 years ago

Sorry to bring this up again, but is it also expected behavior for the above command to create a backend environment? I guess that's what the original question was. While I had been using amplify pull to get the aws-exports.js file, it's recenly been creating a backend app, resulting in two issues:

1) When deploying to amplify by committing the code to the Amplify-linked git repo, it fails on backend build; and 2) When using amplify pull a second time, I'm receiving the following error (though that App doesn't - and shouldn't - exist):

Failed to pull the backend.
App d18xd0t******* not found. Check that the region of the Amplify App is matching the configured region.

It seems like it's creating a backend service... Is there some sort of config I should be looking for to prevent this from happening - or, again, is this expected behavior? Note, I did confirm the region as configured is correct (us-west-2).

josefaidt commented 2 years ago

Hey @raffibag it sounds like we may have an App ID mismatch or a case where the backend is actually created. There is currently a limitation on using a backend without choosing to modify where we are unable to add additional services like hosting. Can you confirm whether you're seeing two different App ID's between the first app (with the backend definition) and the second app (using the same backend)?

raffibag commented 2 years ago

Thank you @josefaidt... I can confirm that the app containing the backend and the front-end only app have the same AmplifyAppId (d18xd0t***) inside the team-provider-info.json file. I can also confirm the apps are in the same us-west-2 region. Note that I'm hosting the front-end only client not via the amplify add hosting command, but by linking the git repos in the AWS Amplify console. Maybe this is the issue? For now, the workaround is simply to ignore the /amplify folder entirely... Doing that allows it to deploy without issue.

josefaidt commented 2 years ago

Hey @raffibag :wave: if I understand correctly we have the app containing the backend in one repository that is not connected to the pipeline, whereas the frontend-only app does not contain the backend definition but is connected to the Amplify CI/CD pipeline for the Amplify App?

raffibag commented 2 years ago

Thank you, @josefaidt. Both apps are connected to the Amplify CI/CD pipeline and are treated as discrete apps in the AWS Amplify console. The front-end only app is connected to the pipeline manually via linking the Git repos directly.

josefaidt commented 2 years ago

Thanks for clarifying @raffibag, does the second app have a custom buildspec file (amplify.yml) or in the Amplify Console do you see a buildspec with a backend job?

raffibag commented 2 years ago

@josefaidt no buildspec file in the local directory, but the Amplify Console buildspec (under Build Settings) is:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Again, please note that I deleted the /amplify directory prior to pushing this to the corresponding git branch.

raffibag commented 2 years ago

@josefaidt so after encountering some similar issues (and hacking a workaround), I think I've discovered the source of the problem.

In the main project (the one hosting the backend), I have set up three environments: dev, test, and main. While test and main share the same appIds (d2y373y...), the dev environment has an entirely different appId (d18xd0t...). I think this happened when I initiated a new project a while back. The issue is when I run amplify pull from the frontend-only project and select the d2y373y... appId, it always pulls the d18xd0t... appId project. Subsequently, when I run amplify pull from the front-end only cli, I receive an App d18xd0t... not found. error.

This d18xd0t... seems almost a phantom app... It keeps showing up, yet I can't seem to find it anywhere in the Amplify console - despite filtering through all the various regions. Any idea what could be causing this or, better yet, a possible resolution?

josefaidt commented 2 years ago

Hey @raffibag that is an interesting find! Does the main app have all three environments or are you currently unable to locate the dev environment and associated app?