AWS: S3+Cloudfront 部署

如何在 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 生效。

我们的部署脚本需要设置以下环境变量:

  • 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

设置它

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

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. {
  5. "Effect": "Allow",
  6. "Action": ["s3:ListBucket"],
  7. "Resource": ["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": ["arn:aws:s3:::example.com/*"]
  21. },
  22. {
  23. "Effect": "Allow",
  24. "Action": [
  25. "cloudfront:CreateInvalidation",
  26. "cloudfront:GetInvalidation",
  27. "cloudfront:ListInvalidations",
  28. "cloudfront:UnknownOperation"
  29. ],
  30. "Resource": "*"
  31. }
  32. ]
  33. }

获取访问密钥和密钥.

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

  • AWS_ACCESS_KEY_ID=”key”
  • AWS_SECRET_ACCESS_KEY=”secret”

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

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

  1. #!/bin/bash
  2. export AWS_ACCESS_KEY_ID="key"
  3. export AWS_SECRET_ACCESS_KEY="secret"
  4. export AWS_BUCKET_NAME="example.com"
  5. export AWS_CLOUDFRONT="UPPERCASE"
  6. # Load nvm (node version manager), install node (version in .nvmrc), and npm install packages
  7. [ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use
  8. # Npm install if not already.
  9. [ ! -d "node_modules" ] && npm install
  10. npm run generate
  11. 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. const gulp = require('gulp')
  2. const awspublish = require('gulp-awspublish')
  3. const cloudfront = require('gulp-cloudfront-invalidate-aws-publish')
  4. const parallelize = require('concurrent-transform')
  5. // https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html
  6. const config = {
  7. // Required
  8. params: { Bucket: process.env.AWS_BUCKET_NAME },
  9. accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  10. secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  11. // Optional
  12. deleteOldVersions: false, // NOT FOR PRODUCTION
  13. distribution: process.env.AWS_CLOUDFRONT, // Cloudfront distribution ID
  14. region: process.env.AWS_DEFAULT_REGION,
  15. headers: {
  16. /* 'Cache-Control': 'max-age=315360000, no-transform, public', */
  17. },
  18. // Sensible Defaults - gitignore these Files and Dirs
  19. distDir: 'dist',
  20. indexRootPath: true,
  21. cacheFileName: '.awspublish',
  22. concurrentUploads: 10,
  23. wait: true // wait for Cloudfront invalidation to complete (about 30-60 seconds)
  24. }
  25. gulp.task('deploy', function () {
  26. // create a new publisher using S3 options
  27. // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
  28. const publisher = awspublish.create(config, config)
  29. let g = gulp.src('./' + config.distDir + '/**')
  30. // publisher will add Content-Length, Content-Type and headers specified above
  31. // If not specified it will set x-amz-acl to public-read by default
  32. g = g.pipe(
  33. parallelize(publisher.publish(config.headers), config.concurrentUploads)
  34. )
  35. // Invalidate CDN
  36. if (config.distribution) {
  37. console.log('Configured with Cloudfront distribution')
  38. g = g.pipe(cloudfront(config))
  39. } else {
  40. console.log(
  41. 'No Cloudfront distribution configured - skipping CDN invalidation'
  42. )
  43. }
  44. // Delete removed files
  45. if (config.deleteOldVersions) {
  46. g = g.pipe(publisher.sync())
  47. }
  48. // create a cache file to speed up consecutive uploads
  49. g = g.pipe(publisher.cache())
  50. // print upload updates to console
  51. g = g.pipe(awspublish.reporter())
  52. return g
  53. })

4.5) 部署和调试

运行:

  1. ./deploy.sh

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

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

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