• 如何在 AWS 上部署 S3 和 Cloudfront
    • 概览
    • 设置它
      • 1. AWS: 设置你的 S3 bucket
      • 2. AWS: 设置你的 Cloudfront 分配
      • 3. AWS: 配置安全访问
      • 4. Laptop: 设置项目的构建脚本

    如何在 AWS 上部署 S3 和 Cloudfront

    AWS是Amazon Web Services。S3是他们的静态存储，可以配置为静态站点托管。Cloudfront是他们的CDN（内容分发网络）

    在AWS w / S3 + Cloudfront上托管静态页面的 Nuxt应用程序功能强大且价格低廉。

    如果我们错过了一个步骤，请提交PR以更新此文档。

    概览

    我们将通过一些AWS服务托管超级便宜：

    • S3
      • 云数据"bucket"为我们的网站文件
      • 可以配置为托管静态网站
    • CloudFront
      • CDN（内容分发网络）
      • 提供免费的HTTPS证书
      • 使您的网站加载速度更快我们会像这样推送网站：
    1. Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS Cloudfront CDN -> Browser
    2.   [      nuxt generate       ]    [         gulp deploy          ]
    3.   [                         deploy.sh                            ]

    首先，我们将使用nuxt generate生成网站。然后，我们将使用 Gulp 将文件发布到S3存储桶并使CouldFront CDN生效。

    • gulp
    • gulp-awspublish
    • gulp-cloudfront-invalidate-aws-publish

    • concurrent-transform (for parallel uploads)我们的部署脚本需要设置以下环境变量：

    • AWS_BUCKET_NAME="example.com"

    • AWS_CLOUDFRONT="UPPERCASE"
    • AWS_ACCESS_KEY_ID="key"
    • AWS_SECRET_ACCESS_KEY="secret"我们将有这些文件：
    1. deploy.sh       -  run `nuxt generate` and `gulp deploy`
    2. gulpfile.js     -  `gulp deploy` code to push files to S3 and invalidate CloudFront

    设置它

    • 创建一个S3 bucket并将其配置为静态站点托管
    • 创建云端分发
    • 配置安全访问
    • 在项目中设置构建脚本

    1. AWS: 设置你的 S3 bucket

    2. AWS: 设置你的 Cloudfront 分配

    对于步骤1和2，请按照此步骤操作 设置S3和Cloudfront的教程

    您现在应该拥有以下数据：

    • AWS_BUCKET_NAME="example.com"
    • AWS_CLOUDFRONT="UPPERCASE"

    3. AWS: 配置安全访问

    对于第3步，我们需要创建：

    • 更新bucket内容
    • 使云端分发生效（更快地将更改传播给用户）使用此策略创建程序化用户:

    注意：用下面的S3 bucket 名称替换2x example.com。 此策略允许推送到指定的存储桶，并使任何云端分发生效。

    1. {
    2.     "Version": "2012-10-17",
    3.     "Statement": [ {
    4.             "Effect": "Allow",
    5.             "Action": [ "s3:ListBucket" ],
    6.             "Resource": [
    7.                 "arn:aws:s3:::example.com"
    8.             ]
    9.         }, {
    10.             "Effect": "Allow",
    11.             "Action": [
    12.                 "s3:PutObject",
    13.                 "s3:PutObjectAcl",
    14.                 "s3:GetObject",
    15.                 "s3:GetObjectAcl",
    16.                 "s3:DeleteObject",
    17.                 "s3:ListMultipartUploadParts",
    18.                 "s3:AbortMultipartUpload"
    19.             ],
    20.             "Resource": [
    21.                 "arn:aws:s3:::example.com/*"
    22.             ]
    23.         }, {
    24.             "Effect": "Allow",
    25.             "Action": [
    26.                 "cloudfront:CreateInvalidation",
    27.                 "cloudfront:GetInvalidation",
    28.                 "cloudfront:ListInvalidations",
    29.                 "cloudfront:UnknownOperation"
    30.             ],
    31.             "Resource": "*"
    32.         }
    33.     ]
    34. }

    获取访问密钥和密钥.

    您现在应该拥有以下数据：

    • AWS_ACCESS_KEY_ID="key"
    • AWS_SECRET_ACCESS_KEY="secret"

    4. Laptop: 设置项目的构建脚本

    4.1) 创建一个deploy.sh脚本。 参考 nvm (node version manager).

    1. #!/bin/bash
    3. export AWS_ACCESS_KEY_ID="key"
    4. export AWS_SECRET_ACCESS_KEY="secret"
    5. export AWS_BUCKET_NAME="example.com"
    6. export AWS_CLOUDFRONT="UPPERCASE"
    8. # Load nvm (node version manager), install node (version in .nvmrc), and npm install packages
    9. [ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use
    10. # Npm install if not already.
    11. [ ! -d "node_modules" ] && npm install
    13. npm run generate
    14. gulp deploy

    4.2) 使deploy.sh可运行，不要检查进入GIT（deploy.sh中有隐私）

    1. chmod +x deploy.sh
    2. echo "
    3. # Don't commit build files
    4. node_modules
    5. dist
    6. .nuxt
    7. .awspublish
    8. deploy.sh
    9. " >> .gitignore

    4.3) 将Gulp添加到项目和命令行

    1. npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
    2. npm install -g gulp

    4.4) 使用构建脚本创建gulpfile.js

    1. var gulp = require('gulp');
    2. var awspublish = require('gulp-awspublish');
    3. var cloudfront = require('gulp-cloudfront-invalidate-aws-publish');
    4. var parallelize = require('concurrent-transform');
    6. // https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html
    8. var config = {
    10.   // Required
    11.   params: { Bucket: process.env.AWS_BUCKET_NAME },
    12.   accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    13.   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    15.   // Optional
    16.   deleteOldVersions: false,                 // NOT FOR PRODUCTION
    17.   distribution: process.env.AWS_CLOUDFRONT, // Cloudfront distribution ID
    18.   region: process.env.AWS_DEFAULT_REGION,
    19.   headers: { /*'Cache-Control': 'max-age=315360000, no-transform, public',*/ },
    21.   // Sensible Defaults - gitignore these Files and Dirs
    22.   distDir: 'dist',
    23.   indexRootPath: true,
    24.   cacheFileName: '.awspublish',
    25.   concurrentUploads: 10,
    26.   wait: true,  // wait for Cloudfront invalidation to complete (about 30-60 seconds)
    27. }
    29. gulp.task('deploy', function() {
    30.   // create a new publisher using S3 options
    31.   // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
    32.   var publisher = awspublish.create(config, config);
    34.   var g = gulp.src('./' + config.distDir + '/**');
    35.     // publisher will add Content-Length, Content-Type and headers specified above
    36.     // If not specified it will set x-amz-acl to public-read by default
    37.   g = g.pipe(parallelize(publisher.publish(config.headers), config.concurrentUploads))
    39.   // Invalidate CDN
    40.   if (config.distribution) {
    41.     console.log('Configured with Cloudfront distribution');
    42.     g = g.pipe(cloudfront(config));
    43.   } else {
    44.     console.log('No Cloudfront distribution configured - skipping CDN invalidation');
    45.   }
    47.   // Delete removed files
    48.   if (config.deleteOldVersions) g = g.pipe(publisher.sync());
    49.   // create a cache file to speed up consecutive uploads
    50.   g = g.pipe(publisher.cache());
    51.   // print upload updates to console
    52.   g = g.pipe(awspublish.reporter());
    53.   return g;
    54. });

    4.5) 部署和调试

    运行：

    1. ./deploy.sh

    您应该得到类似于此的输出：

    1. $ ./deploy.sh
    3. Found '/home/michael/scm/example.com/www/.nvmrc' with version <8>
    4. Now using node v8.11.2 (npm v5.6.0)
    6. > example.com@1.0.0 generate /home/michael/scm/example.com/www
    7. > nuxt generate
    9.   nuxt:generate Generating... +0ms
    10.   nuxt:build App root: /home/michael/scm/example.com/www +0ms
    11.   nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms
    12.   nuxt:build Generating files... +36ms
    13.   nuxt:build Generating routes... +10ms
    14.   nuxt:build Building files... +24ms
    15.   ████████████████████ 100%
    17. Build completed in 7.009s
    21.  DONE  Compiled successfully in 7013ms                                                                                                                                     21:25:22
    23. Hash: 421d017116d2d95dd1e3
    24. Version: webpack 3.12.0
    25. Time: 7013ms
    26.                                    Asset     Size  Chunks             Chunk Names
    27.      pages/index.ef923f795c1cecc9a444.js  10.6 kB       0  [emitted]  pages/index
    28.  layouts/default.87a49937c330bdd31953.js  2.69 kB       1  [emitted]  layouts/default
    29. pages/our-values.f60c731d5c3081769fd9.js  3.03 kB       2  [emitted]  pages/our-values
    30.    pages/join-us.835077c4e6b55ed1bba4.js   1.3 kB       3  [emitted]  pages/join-us
    31.        pages/how.75f8cb5bc24e38bca3b3.js  2.59 kB       4  [emitted]  pages/how
    32.              app.6dbffe6ac4383bd30a92.js   202 kB       5  [emitted]  app
    33.           vendor.134043c361c9ad199c6d.js  6.31 kB       6  [emitted]  vendor
    34.         manifest.421d017116d2d95dd1e3.js  1.59 kB       7  [emitted]  manifest
    35.  + 3 hidden assets
    36. Hash: 9fd206f4b4e571e9571f
    37. Version: webpack 3.12.0
    38. Time: 2239ms
    39.              Asset    Size  Chunks             Chunk Names
    40. server-bundle.json  306 kB          [emitted]
    41.   nuxt: Call generate:distRemoved hooks (1) +0ms
    42.   nuxt:generate Destination folder cleaned +10s
    43.   nuxt: Call generate:distCopied hooks (1) +8ms
    44.   nuxt:generate Static & build files copied +7ms
    45.   nuxt:render Rendering url /our-values +0ms
    46.   nuxt:render Rendering url /how +67ms
    47.   nuxt:render Rendering url /join-us +1ms
    48.   nuxt:render Rendering url / +0ms
    49.   nuxt: Call generate:page hooks (1) +913ms
    50.   nuxt: Call generate:page hooks (1) +205ms
    51.   nuxt: Call generate:page hooks (1) +329ms
    52.   nuxt: Call generate:page hooks (1) +361ms
    53.   nuxt:generate Generate file: /our-values/index.html +2s
    54.   nuxt:generate Generate file: /how/index.html +0ms
    55.   nuxt:generate Generate file: /join-us/index.html +0ms
    56.   nuxt:generate Generate file: /index.html +0ms
    57.   nuxt:render Rendering url / +2s
    58.   nuxt: Call generate:done hooks (1) +4ms
    59.   nuxt:generate HTML Files generated in 11.8s +5ms
    60.   nuxt:generate Generate done +0ms
    61. [21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js
    62. [21:25:27] Starting 'deploy'...
    63. Configured with Cloudfront distribution
    64. [21:25:27] [cache]  README.md
    65. [21:25:27] [cache]  android-chrome-192x192.png
    66. [21:25:27] [cache]  android-chrome-512x512.png
    67. [21:25:27] [cache]  apple-touch-icon.png
    68. [21:25:27] [cache]  browserconfig.xml
    69. [21:25:27] [cache]  favicon-16x16.png
    70. [21:25:27] [cache]  favicon-32x32.png
    71. [21:25:27] [cache]  favicon.ico
    72. [21:25:27] [cache]  favicon.svg
    73. [21:25:27] [cache]  logo-branches.svg
    74. [21:25:27] [cache]  logo-small.svg
    75. [21:25:27] [cache]  logo.svg
    76. [21:25:27] [cache]  mstile-150x150.png
    77. [21:25:27] [cache]  og-image.jpg
    78. [21:25:27] [cache]  safari-pinned-tab.svg
    79. [21:25:27] [cache]  site.webmanifest
    80. [21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js
    81. [21:25:29] [update] 200.html
    82. [21:25:30] [create] videos/flag.jpg
    83. [21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js
    84. [21:25:34] [create] videos/flag.mp4
    85. [21:25:34] [cache]  _nuxt/pages/how.75f8cb5bc24e38bca3b3.js
    86. [21:25:34] [cache]  _nuxt/pages/join-us.835077c4e6b55ed1bba4.js
    87. [21:25:34] [cache]  _nuxt/pages/our-values.f60c731d5c3081769fd9.js
    88. [21:25:36] [update] our-values/index.html
    89. [21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js
    90. [21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js
    91. [21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js
    92. [21:25:38] [update] join-us/index.html
    93. [21:25:38] [update] how/index.html
    94. [21:25:43] [create] videos/flag.webm
    95. [21:25:43] [update] index.html
    96. [21:25:43] Cloudfront invalidation created: I16NXXXXX4JDOA
    97. [21:26:09] Finished 'deploy' after 42 s

    请注意，创建的Cloudfront invalidation created: XXXX是来自cloudfront invalidation npm包的唯一输出。 如果你没有看到，它就不起作用了。