[英]how to deploy successfully React app with nextjs to AWS Amplify?
I am new with aws.我是aws的新手。 I try to deploying my simple React app to aws amplify front-end server.我尝试将我的简单 React 应用程序部署到 aws amplify 前端服务器。
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.这是一些信息。
{
"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"
}
}
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}
]
}
}
}
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
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.在构建目录中找不到index.html
。 After the build step, you need to export your app to static html by running next export
在构建步骤之后,您需要通过运行next export
将您的应用程序导出到 static html
Modify your build script to将您的构建脚本修改为
"build": "next build && next export"
By default next exports a static version of your app in the out
directory.默认情况下,接下来会在out
目录中导出应用程序的 static 版本。 Accordingly modify baseDirectory
in amplify.yml
相应地修改baseDirectory
中的amplify.yml
You can read more about next export
here您可以在此处阅读有关next export
的更多信息
Please note that you cannot deploy next apps with SSR enabled to Amplify.请注意,您无法在启用 SSR 的情况下部署下一个应用程序以进行 Amplify。 All the HTML files are pre-build.所有 HTML 文件都是预构建的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.