reactjs - 如何使用 nextjs 将 React 应用程序成功部署到 AWS Amplify？

Question

我是aws的新手。我尝试将我的简单 React 应用程序部署到 aws 放大前端服务器。
我的应用程序已成功构建，但我的页面显示“拒绝访问”

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

我不知道为什么。你能给我一个提示来解决这个问题吗？
这是一些信息。
包.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"
  }
}

下一个.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}
      ]
    }
  }
}

放大.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/**/*

前端构建日志的某些部分

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

Answer 1

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

找不到index.html在构建目录中。在构建步骤之后，您需要通过运行 next export 将您的应用程序导出为静态 html。

将您的构建脚本修改为

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

默认情况下，接下来会在 out 中导出您的应用程序的静态版本。目录。据此修改baseDirectory在 amplify.yml
您可以阅读更多关于 next export 的信息here

请注意，您无法将启用 SSR 的下一个应用程序部署到 Amplify。所有的 HTML 文件都是预先构建的。