Я использую AWS усиление для поддержки приложения JS.В настоящее время у меня есть только два ресурса: API (appsync / graphql) и хостинг, что вызывает у меня проблемы.
amplify add hosting, кажется, работает нормально, как и amplify push.amplify publish (для dev S3) дает положительный ответ, и в S3 создается соответствующий сегмент, но он пуст.Ссылка направляет меня на страницу с ошибкой:
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: index.html
Я успешно запустил учебник по JS по усилению и простой альфа-предшественник моего текущего приложения.Они правильно заполняют новое ведро S3, когда я звоню amplify publish.
Файл index.html очень простой и одинаковый между альфа и бета версией.Просто заголовок, два пустых элемента и <script> вызов main.bundle.js.У старого был файл css в файле index.html.
- Обратите внимание, что
npm start и открытие в localhost прекрасно работает для ALL вариантов.
Я вижу только два основных отличия от альфы и текущей версии.
- Старые версии были .js, новая - .jsx для React (все они используют webpack).
- Мой css теперь находится во внешнем файле (связан с использованием веб-пакета).
Вот мой webpack.config.js для приложения альфа :
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/
}
]
},
devServer: {
contentBase: './dist',
overlay: true,
hot: true
},
plugins: [
new CopyWebpackPlugin(['index.html']),
new webpack.HotModuleReplacementPlugin()
]
};
Вот webpack.config.js для текущего приложения:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.jsx',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
devServer: {
contentBase: './dist',
overlay: true,
hot: true
},
plugins: [
new CopyWebpackPlugin(['index.html']),
new webpack.HotModuleReplacementPlugin()
]
};
Я не уверен, что проблема связана с чем-то другим.
Вывод для amplify add hosting:
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name blahblahblahblahblahblahblahblah
? index doc for the website index.html
? error doc for the website index.html
You can now publish your app using the following command:
Command: amplify publish
Вывод для amplify push (уверен, что эта команда не нужна):
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | Create | awscloudformation |
| Api | AppSyncResource | No Change | |
? Are you sure you want to continue? Yes
/ Updating resources in the cloud. This may take a few minutes...
CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Wed Apr 10 2019 20:34:27 GMT-0400 (Eastern Daylight Time) Resource creation Initiated
CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Wed Apr 10 2019 20:34:26 GMT-0400 (Eastern Daylight Time)
UPDATE_IN_PROGRESS myapp-datetime AWS::CloudFormation::Stack Wed Apr 10 2019 20:34:20 GMT-0400 (Eastern Daylight Time) User Initiated
- Updating resources in the cloud. This may take a few minutes...
CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Wed Apr 10 2019 20:34:32 GMT-0400 (Eastern Daylight Time)
CREATE_IN_PROGRESS myapp-datetime-hostingS3AndCloudFront-16JS9AMKX3673 AWS::CloudFormation::Stack Wed Apr 10 2019 20:34:27 GMT-0400 (Eastern Daylight Time) User Initiated
\ Updating resources in the cloud. This may take a few minutes...
CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Wed Apr 10 2019 20:34:33 GMT-0400 (Eastern Daylight Time) Resource creation Initiated
/ Updating resources in the cloud. This may take a few minutes...
CREATE_COMPLETE myapp-datetime-hostingS3AndCloudFront-16JS9AMKX3673 AWS::CloudFormation::Stack Wed Apr 10 2019 20:35:00 GMT-0400 (Eastern Daylight Time)
CREATE_COMPLETE BucketPolicy AWS::S3::BucketPolicy Wed Apr 10 2019 20:34:58 GMT-0400 (Eastern Daylight Time)
CREATE_IN_PROGRESS BucketPolicy AWS::S3::BucketPolicy Wed Apr 10 2019 20:34:58 GMT-0400 (Eastern Daylight Time) Resource creation Initiated
CREATE_IN_PROGRESS BucketPolicy AWS::S3::BucketPolicy Wed Apr 10 2019 20:34:57 GMT-0400 (Eastern Daylight Time)
CREATE_COMPLETE S3Bucket AWS::S3::Bucket Wed Apr 10 2019 20:34:54 GMT-0400 (Eastern Daylight Time)
- Updating resources in the cloud. This may take a few minutes...
UPDATE_COMPLETE myapp-datetime AWS::CloudFormation::Stack Wed Apr 10 2019 20:35:06 GMT-0400 (Eastern Daylight Time)
UPDATE_COMPLETE_CLEANUP_IN_PROGRESS myapp-datetime AWS::CloudFormation::Stack Wed Apr 10 2019 20:35:05 GMT-0400 (Eastern Daylight Time)
CREATE_COMPLETE hostingS3AndCloudFront AWS::CloudFormation::Stack Wed Apr 10 2019 20:35:02 GMT-0400 (Eastern Daylight Time)
√ All resources are updated in the cloud
Hosting endpoint: http://myapp-datetime-hostingbucket.s3-website-us-east-1.amazonaws.com
Вывод amplify publish:
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Api | AppSyncResource | No Change | |
| Hosting | S3AndCloudFront | No Change | awscloudformation |
? Are you sure you want to continue? Yes
√ All resources are updated in the cloud
> my-app@1.0.0 build C:\path\to\my-app
> webpack
Hash: 749f0c4a7f4c6cab8189
Version: webpack 4.29.6
Time: 4020ms
Built at: 04/10/2019 8:42:00 PM
Asset Size Chunks Chunk Names
index.html 632 bytes [emitted]
main.bundle.js 3.68 MiB main [emitted] main
Entrypoint main = main.bundle.js
[0] fs (ignored) 15 bytes {main} [built]
[./css/style.css] 1.06 KiB {main} [built]
[./node_modules/css-loader/dist/cjs.js!./css/style.css] 1.15 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/app.jsx] 9.88 KiB {main} [built]
[./src/aws-exports.js] 689 bytes {main} [built]
[./src/graphql/mutations.js] 688 bytes {main} [built]
[./src/graphql/queries.js] 649 bytes {main} [built]
[./src/utils/client-handler.jsx] 3.97 KiB {main} [built]
[./src/utils/flag-form.jsx] 6.73 KiB {main} [built]
+ 500 hidden modules
frontend build command exited with code 0
√ Uploading files successful.
Your app is published successfully.
http://myapp-datetime-hostingbucket.s3-website-us-east-1.amazonaws.com
Тем не менее, когда я перехожу по ссылке, это ошибка 404.
Мое приложение также не работает, если я пытаюсь опубликовать в prod.Я предполагаю, что это вызвано той же проблемой.