{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 ","description":"前回はgolangでの適当helloworldをFargateにパイプラインでデプロイしました。\nFargateすら必要ない。静的コンテンツを載せるだけでOKという場合があると思います。特に最近ではNuxtが使いやすくなってきて、genすればdistにindex.htmlが作られるという。。。\nなので、今回はNuxtをS3にデプロイする方法をまとめました。\nもちろんCloudFrontを使ってサブドメインでHTTPSにします。","noindex":null,"canonicalLink":null},"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 ","template":"SinglePost","subtitle":null,"date":"2019-08-09T22:26:19.211Z","categories":[{"category":"Tech"}]},"html":"

前回はgolangでの適当helloworldをFargateにパイプラインでデプロイしました。\nFargateすら必要ない。静的コンテンツを載せるだけでOKという場合があると思います。特に最近ではNuxtが使いやすくなってきて、genすればdistにindex.htmlが作られるという。。。
\nなので、今回はNuxtをS3にデプロイする方法をまとめました。\nもちろんCloudFrontを使ってサブドメインでHTTPSにします。

\n

bucket作成

\n\n

参考

\n

AWS S3で静的Webページをホスティングする - Qiita

\n

CloudFront 経由で S3 のファイルにアクセスする - Qiita

\n

CloudFrontよりDistributionsを作成する

\n\n

Origin Domain Name：対象のバケットを選択
\nRestrict Bucket Access：YES
\nOrigin Access Identity：Create a New Identity
\nGrant Read Permissions on ：Yes, Update Bucket Policy
\nAlternate Domain Names:ドメインを入れる
\nSSL Certificate：Custom SSL Certificate (example.com)
\nDefault Root Objec:index.html

\n

Route53の設定

\n

Aレコード、エイリアスは上で作ったCloudFrontのディストリビューションを選択

\n

ポリシーの編集(確認)

\n
{\n    \"Version\": \"2008-10-17\",\n    \"Id\": \"PolicyForCloudFrontPrivateContent\",\n    \"Statement\": [\n        {\n        \"Sid\":\"PublicReadForGetBucketObjects\",\n             \"Effect\":\"Allow\",\n          \"Principal\": \"*\",\n           \"Action\":[\"s3:GetObject\"],\n           \"Resource\":[\"arn:aws:s3:::<BUCKET_NAME>/*\"\n           ]\n         },\n        {\n            \"Sid\": \"1\",\n            \"Effect\": \"Allow\",\n            \"Principal\": {\n                \"AWS\": \"arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E21H4PD9QM10NM\"\n            },\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::<BUCKET_NAME>/*\"\n        }\n    ]\n}\n
\n

ソースプロジェクトに追加するもの

\n

buildspec.yml

\n
version: 0.2\n\nphases:\n  install:\n    commands:\n      - apt-get update -qq && apt-get install -y apt-transport-https\n      - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -\n      - echo \"deb https://dl.yarnpkg.com/debian/ stable main\" | tee /etc/apt/sources.list.d/yarn.list\n      - apt-get update && apt-get install yarn\n  pre_build:\n    commands:\n      - echo 'Start pre_build phase'\n      - yarn\n  build:\n    commands:\n      - echo 'Start build phase'\n      - yarn build\n  post_build:\n    commands:\n      - echo 'Start post_build phase'\n      - cat ./node_modules/.bin/gulp\n      - echo '------'\n      - ./node_modules/.bin/gulp deploy\n      # - ./deploy.sh\n
\n

deploy.sh

\n
#!/bin/bash\n\n# nvm (node version manager) のロード、node のインストール (バージョン指定は .nvmrc ファイルにある)、 npm パッケージのインストール\n[ -s \"$HOME/.nvm/nvm.sh\" ] && source \"$HOME/.nvm/nvm.sh\" && nvm use\n# 既にインストールされていなければ、 npm をインストールする\n[ ! -d \"node_modules\" ] && npm install\n\nnpm run generate\nAWS_ACCESS_KEY_ID=\"<AWS_ACCESS_KEY_ID>\" AWS_SECRET_ACCESS_KEY=\"<AWS_SECRET_ACCESS_KEY>\" AWS_BUCKET_NAME=\"<AWS_BUCKET_NAME>\" AWS_CLOUDFRONT=\"<AWS_CLOUDFRONT>\" ./node_modules/.bin/gulp deploy\n
\n\n
chmod +x deploy.sh\n
\n

gulpfile.js

\n
var gulp = require('gulp')\nvar awspublish = require('gulp-awspublish')\nvar cloudfront = require('gulp-cloudfront-invalidate-aws-publish')\nvar parallelize = require('concurrent-transform')\n\n// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html\n\nvar config = {\n  // 必須\n  params: { Bucket: process.env.AWS_BUCKET_NAME },\n  accessKeyId: process.env.AWS_ACCESS_KEY_ID,\n  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,\n\n  // 任意\n  deleteOldVersions: false, // PRODUCTION で使用しない\n  distribution: process.env.AWS_CLOUDFRONT, // Cloudfront distribution ID\n  region: process.env.AWS_DEFAULT_REGION,\n  headers: {\n    /*'Cache-Control': 'max-age=315360000, no-transform, public',*/\n  },\n\n  // 適切なデフォルト値 - これらのファイル及びディレクトリは gitignore されている\n  distDir: 'dist',\n  indexRootPath: true,\n  cacheFileName: '.awspublish',\n  concurrentUploads: 10,\n  wait: true // Cloudfront のキャッシュ削除が完了するまでの時間 (約30〜60秒)\n}\n\ngulp.task('deploy', function() {\n  // S3 オプションを使用して新しい publisher を作成する\n  // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property\n  var publisher = awspublish.create(config, config)\n\n  var g = gulp.src('./' + config.distDir + '/**')\n  // publisher は、上記で指定した Content-Length、Content-Type、および他のヘッダーを追加する\n  // 指定されていない場合、 x-amz-acl はデフォルトで public-read に設定される\n  g = g.pipe(\n    parallelize(publisher.publish(config.headers), config.concurrentUploads)\n  )\n\n  // CDN のキャッシュを削除する\n  if (config.distribution) {\n    console.log('Configured with Cloudfront distribution')\n    g = g.pipe(cloudfront(config))\n  } else {\n    console.log(\n      'No Cloudfront distribution configured - skipping CDN invalidation'\n    )\n  }\n\n  // 削除したファイルを同期する\n  if (config.deleteOldVersions) g = g.pipe(publisher.sync())\n  // 連続したアップロードを高速化するために、キャッシュファイルを作成する\n  g = g.pipe(publisher.cache())\n  // アップロードの更新をコンソールに出力する\n  g = g.pipe(awspublish.reporter())\n  return g\n})\n
\n

gulpを追加

\n
npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform\nnpm install -g gulp\n
\n

CodeDeployからデプロイプロジェクトを作る

\n

特に難しいところはない。\n特権を付与することを忘れずに

\n

環境変数

\n
AWS_CLOUDFRONT          <AWS_CLOUDFRONTのID>\nAWS_SECRET_ACCESS_KEY     <AWS_SECRET_ACCESS_KEY>\nAWS_BUCKET_NAME         <AWS_BUCKET_NAME>\nAWS_DEFAULT_REGION      ap-northeast-1\nAWS_ACCESS_KEY_ID         <AWS_ACCESS_KEY_ID>\n
\n

fontsとiconsがデプロイされなかったので、手動であげる。

\n

pipelineを作る

\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
こちらでも公開中
\"hatena\"
はてなブログ
\"luck!\"
Luck!
\n
\n
\n\n
","id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864"},"allPosts":{"edges":[{"node":{"id":"11e872df-ccae-573a-bd93-b9c1fafbab72","fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}},"next":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"previous":null},{"node":{"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07","fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"next":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"previous":{"fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}}},{"node":{"id":"b320c2db-f74d-5213-be91-d01c7f94f8c0","fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"next":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"previous":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}}},{"node":{"id":"cbd9c95c-a098-592c-bfd9-a936996ff335","fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"next":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"previous":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}}},{"node":{"id":"fc5fe850-be92-5297-859f-0839f6b2fbb7","fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"next":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"previous":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}}},{"node":{"id":"d8500bc6-e602-599e-a22f-80810d132de2","fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"next":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"previous":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}}},{"node":{"id":"4c934147-b318-5afd-9241-c1f5d4d75e2f","fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"next":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"previous":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}}},{"node":{"id":"04233bd7-e37d-57cb-b458-50e230b67866","fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"next":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"previous":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}}},{"node":{"id":"ecb65f65-3564-58d5-b2c6-1b712b21783b","fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"next":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"previous":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}}},{"node":{"id":"86bea805-00cf-5633-af27-2bcd764f3d42","fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"next":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"previous":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}}},{"node":{"id":"e3ba1aa1-d2b2-5519-b9b9-00efdcadbd11","fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"next":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"previous":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}}},{"node":{"id":"d31690b3-2c7d-5560-9ab4-a57d83e95b62","fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"previous":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}}},{"node":{"id":"8601b324-6161-51ed-95ce-cb5ffe1ffaa6","fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"previous":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}}},{"node":{"id":"450caa1d-e0c5-5096-95c9-13b3857b90b3","fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}}},{"node":{"id":"1877003c-32b0-5bc4-9cee-8b736797bf64","fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"next":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}}},{"node":{"id":"3777734d-dc86-5124-830b-b123179a6255","fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"next":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}}},{"node":{"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864","fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"next":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"previous":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}}},{"node":{"id":"868b483d-2cde-508c-8978-327a3f734203","fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"previous":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}}},{"node":{"id":"f22af0ac-f3e5-5cc1-b552-8c66b6026112","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"previous":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}}},{"node":{"id":"569f7ab2-0c83-5683-81fa-21c69fd5117a","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}}},{"node":{"id":"9abaf084-569e-53db-970a-42f6b1961c26","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}}},{"node":{"id":"2b4b8b24-8bac-5d6e-b8be-be93abf830a3","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}}},{"node":{"id":"c3a9a179-8a04-5767-b325-56f39a3a8173","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"next":null,"previous":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864"}}}