CodePipelineを使って静的サイトのデプロイを自動化しよう！

12308 ワード
CodePipeline 初心者 CodeBuild AWS AWS テキストリンク

はじめに

今回は、Node.js製のHexoという静的サイトジェネレーターを使ってAWSのS3にデプロイします。
ちなみにHexoを知らなくても問題なくデプロイできるように構成しています。

そのデプロイを、CodePipelineとCodeBuildを使って自動化しましょう。

CodePipelineとは？

AWS CodePipeline は完全マネージド型の継続的デリバリーサービスで、リリースを自動化します。

まぁここで疑問なのは、「継続的デリバリーサービス」ですよね。
AWS公式サイトでは以下のように紹介されていました。

継続的デリバリーとは、ソフトウェア開発手法の 1 つで、コード変更が発生すると、自動的に実稼働環境へのリリース準備が実行されるというものです。最新のアプリケーション開発の柱となる継続的デリバリーは、継続的インテグレーションを拡張したもので、すべてのコード変更が、ビルド段階の後にテスト環境または運用環境 (あるいはその両方) にデプロイされます。適切に実装すると、開発者は、標準化されたテストプロセスに合格し、デプロイ準備の整ったビルド成果物を常に手元に持つことになります。

初学者には難しすぎたので、要約するとこのような感じです。
CodePipelineは、「コードに変更があったときにその変更内容を自動的に反映させてくれるサービス」です。

むちゃくちゃ便利ですよね。
また設定も簡単なのでぜひ取り入れたいところです。

なお、初学者には優しいAWS無料枠の対象であり、「1つ」しか使わないのであればずっと無料です。
（ちなみに、料金は1つあたり$1です。なので無料枠をオーバーしてもそんなにダメージはありません。）

ということで今回のハンズオンは無料でできるので、ぜひ試してみてください。

流れ

どのように作成していくか軽くメモしていきます。

  1. Hexoを使って静的サイトを作成する
  2. デプロイ先のS3バケットを用意する
  3. CodeBuildを使うためにbuildspec.ymlを作成
  4. GitHubのmasterブランチにプッシュ
  5. CodePipelineの設定
  6. 新しい記事をデプロイ

今回は、静的サイトジェネレーターにHexoを採用しましたが、以下のフレームワークでも可能です。

フレームワーク 説明
Next.js React, JavaScript ベース
Gatsby React, JavaScript ベース
Hugo Go ベース
Nuxt.js Vue, JavaScript ベース
Jekyll Ruby ベース

ちなみに、S3は、SPAはできますが、Node.jsの実行が必要なSSRはできません。
なので、SSRを使いたい場合は、ECS, EC2などにデプロイしていくことになります。

それでは実際にやってみましょう！

ハンズオン

1. Hexoを使って静的サイトを作成する

今回のハンズオンを行う上で、Node.jsとGitの2つがインストールされていることが前提です。
ない方はインストールされてください。

ちなみに私の環境は以下となっています。

パッケージ バージョン
Node.js 14.17.1
Git 2.31.0

それでは始めます。

HexoのCLIをインストール

まずはCLIをインストールしましょう。

ターミナル
$ npm install -g hexo-cli

新規作成

Hexoのプロジェクトを作成します。

ターミナル
$ hexo init blog

ローカルで表示

ターミナル
$ hexo server

このような感じで表示されればOKです。

2. デプロイ先のS3バケットを用意する

バケットの作成

まずはバケットを作成しましょう。

S3のバケット名はダブってはいけないので、下記を参考に命名されてください。

また、アクセス設定のチェックは外しておきましょう。

これでバケットを作成できます。
作成されたバケットの中に入りましょう。

では、プロパティをみてみましょう。

一番下に、「静的ウェブサイトホスティング」の項目があるのでこちらを有効にしましょう。

設定箇所は以下の2点でOKです。

バケットポリシーの設定

次はバケットポリシーの設定です。

バケットポリシーで設定する内容は以下の通りです。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::(バケット名)/*"
        }
    ]
}

バケット名は任意の値に上書きしてください。

このように編集できればOKです。

3. CodeBuildを使うためにbuildspec.ymlを作成

Hexoで作成したファイルをビルドする必要があるので、CodeBuildが必要になります。

CodeBuildを使うには、buildspec.ymlが必要になるので作成していきましょう。

blog/buildspec.yml
version: 0.2

# CodeBuild でのビルドの各段階で実行するコマンドを定義
phases:
  # ビルド前に実行するコマンド
  install:
    # どのランタイムを使用するか定義
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g hexo
      - npm install
  # ビルド時に実行するコマンド
  build:
    commands:
      - hexo generate
# 以下のフォルダをS3にアップロードする
artifacts:
  files:
    - '**/*'
  base-directory: 'public'

他のフレームワークを使用する場合は、ランタイムの修正が必要になります。
こちらを参考にされてください。

4. GitHubのmasterブランチにプッシュ

GitHubのmasterブランチにプッシュしましょう。
私はこんな感じでリポジトリを作成しました。

5. CodePipelineの設定

それでは、パイプラインの作成をしましょう。

パイプライン名を設定しましょう。

それでは、GitHubと接続しましょう。

接続名は適当で構いません。

では、「新しいアプリをインストール」して接続しましょう。

これでGitHubとパイプラインの接続はできました。

次にビルドステージの設定です。

プロジェクトの作成をしましょう。

最後にデプロイステージの設定です。

⚠️上記のリージョンにミスがあります。こちらは東京リージョンにしてください。

変更すれば、以下のようにすべて成功します。

アクセスしてみましょう。

問題ないですね！

では、最後に新しい記事を入れてデプロイしてみましょう。

6. 新しい記事をデプロイ

記事を作成しましょう。

ターミナル
$ hexo new test

マークダウンファイルが作成されるので修正しましょう。

source/_posts/test.md
---
title: test
date: 2021-09-23 11:32:27
tags:
---

テスト記事です。

これをGitHubにプッシュしましょう。

またパイプラインを確認します。

全部成功してますね！

ではサイトを確認しましょう。

更新されてますね！
これで終わりです。

めちゃくちゃ簡単ですね！
ぜひCodePipeline使ってみてください！