Question

我是新来的aws。我尝试将我的简单React应用程序部署到aws放大前端服务器。

我的应用程序构建成功，但是页面显示“访问被拒绝”

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

我不知道为什么。您能给我一个解决此问题的提示吗？

这是一些信息。

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/**/*

前端构建日志的一部分


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文件都是预先构建的。

如何将带有nextjs的React应用成功部署到AWS Amplify？

package.json

next.config.js

amplify.yml

前端构建日志的一部分

1 个答案: