10

I am new with aws. I try to deploying my simple React app to aws amplify front-end server.

My app has built successfully, but my page shows me 'Access Denied'

<Error>
 <Code>AccessDenied</Code>
 <Message>Access Denied</Message>
 <RequestId>C82A3C87F1F61733</RequestId>
 <HostId>Dra3fQ4LWJQVgGKKcF/EssjEAEHjYt1FuVQRI9pa+CA5L+Bgwl0hArw/EZEIhjg0d4qZ8DxMsLg=</HostId>
</Error>

I don't know why. Can you give me a hint to resolve this problem?

here is some info.

package.json

{
  "name": "react-env-setting",
  "version": "1.0.0",
  "description": "practice for react env setting with scss, nextjs",
  "main": "index.js",
  "scripts": {
    "build": "next build",
    "start": "next start",
    "dev": "next",
    "test": "jest --verbose --watchAll"
  },
  "author": "reallifeliver",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-typescript": "^7.10.1",
    "@types/node": "^14.0.9",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^3.5.3",
    "dotenv": "^8.2.0",
    "eslint": "^7.1.0",
    "next": "^9.4.4",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.26.7",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^1.0.0",
    "style-loader": "^1.2.1",
    "typescript": "^3.9.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@babel/preset-env": "^7.10.0",
    "@babel/preset-react": "^7.10.0",
    "@types/enzyme": "^3.10.5",
    "@types/jest": "^25.2.3",
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "babel-loader": "^8.1.0",
    "enzyme": "^3.11.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.0.1",
    "prettier": "2.0.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

next.config.js


const path = require('path');

module.exports = {
  distDir:'dist',
  webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {
    console.log(config)
    return config
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  experimental: {
    async redirects() {
      return [
        { source: '/', destination: '/home', permanent: true}
      ]
    }
  }
}

amplify.yml

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
        - mkdir dist
        - npm install
    build:
      commands:
        - npm run build
    postBuild:
        commands:
            - ls
            - pwd
            - cd dist
            - ls
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

some part of frontend build log


2020-06-10T10:32:25.300Z [INFO]: # Completed phase: postBuild
2020-06-10T10:32:25.300Z [INFO]: ## Build completed successfully
2020-06-10T10:32:25.302Z [INFO]: # Starting caching...
2020-06-10T10:32:25.378Z [INFO]: Creating cache artifact...
2020-06-10T10:32:31.671Z [INFO]: # Cache artifact is: 249MB
2020-06-10T10:32:31.794Z [INFO]: # Uploading cache artifact...
2020-06-10T10:32:34.390Z [INFO]: # Caching completed
2020-06-10T10:32:34.525Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src472370803/src/react-env-setting/dist
2020-06-10T10:32:34.525Z [INFO]: # Starting build artifact upload process...
2020-06-10T10:32:34.685Z [INFO]: # Build artifact is: 0MB
2020-06-10T10:32:34.685Z [INFO]: # Uploading build artifact '__artifacts.zip'...
2020-06-10T10:32:34.698Z [INFO]: # Build artifact is: 0MB
2020-06-10T10:32:34.698Z [INFO]: # Uploading build artifact '__artifactsHash.zip'...
2020-06-10T10:32:34.851Z [INFO]: # Build artifact upload completed
2020-06-10T10:32:34.851Z [INFO]: # Starting environment caching...
2020-06-10T10:32:34.851Z [INFO]: # Environment caching completed

1 Answer 1

9
2020-06-10T10:32:34.525Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src472370803/src/react-env-setting/dist

It's not able to find index.html in the build directory. After the build step, you need to export your app to static html by running next export

Modify your build script to

"build": "next build && next export"

By default next exports a static version of your app in the out directory. Accordingly modify baseDirectory in amplify.yml

You can read more about next export here

Please note that you cannot deploy next apps with SSR enabled to Amplify. All the HTML files are pre-build.

Sign up to request clarification or add additional context in comments.

1 Comment

This answer is out of date. AWS claims to support nextjs with ssr now on amplify. However I'm running into a similar issue even after following their guide 🤷‍♂️ docs.amplify.aws/guides/hosting/nextjs/q/platform/js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.