AWS CodePipelineとは
AWS CodePipeline はフルマネージド型のサービスで、アプリケーションとインフラストラクチャをアップデートするパイプラインのリリースを自動化するサービスです。
今回はCodePipelineを使ってReact.jsを使ったFront WebサービスのCI/CD手法を紹介します。
React.jsを理解する
公式チュートリアルは下記となります。
https://ja.reactjs.org/docs/create-a-new-react-app.html
一通り環境を整えた後、
Create-React-Appを対象のフォルダで実施すると、下記のようになります。
この「build」フォルダの中身がwebサイト本体になります。
buildに作成された下記をS3バケットにアップロードすることで静的webサイトを公開することが出来ます。これをアップデートの度にS3に手動アップロードするのは不便です。
これをCI/CDで自動デプロイできるようにします。
CI/CD環境(React.js)
構築環境
今回の環境は下記のような構成です。
AWS環境下でCloudFront+S3の静的ウェブサイト構成です。
S3にReact.jsをデプロイします。
対象外範囲
CodePipelineにてソースコードの更新を検知、CodeBuildでreact.jsのビルドを行います。
CodeDeployは不要で、CodePipeline内のDeploy機能でデプロイします。
今回ソースコードの管理システムについては人それぞれかと思うので割愛します。
backlogを用いたソースコード管理のCI/CDは下記記事に書いております。
CloudFront+S3構築についても今回は割愛します。
CodePipeline作成
設定方法
①パイプラインの設定を選択する
パイプライン名：任意
サービスロール：新しいサービスロール
ロール名：任意
チェックボックス：チェック
「次に」
②ソースステージを選択する
各環境によるため割愛します。
③ビルドステージを追加する
プロバイダーを構築する：CodeBuild
リージョン：任意
プロジェクト名：「プロジェクトを作成する」でCodeBuildへ。
④CodeBuild
プロジェクト名：任意
下記のように設定。
基本何でも良いですが、AWSのベストプラクティスとしては最新版が良いそうです。
⑤Buildspecをコマンドで挿入
version: 0.2
phases:
pre_build:
commands:
- rm -rf node_modules
- yarn install
build:
commands:
- yarn build
artifacts:
base-directory: 'build'
files:
- '**/*'コピペでOKです。最終行の「artifacts」で上記で述べた「biuld」フォルダに階層を移動、「- '**/*'」で移動先のファイル全てをアーティファクトとして出力する。という設定です。
これでCodeBuildの作成は終了です。
⑥CodePipelineに戻る
デプロイは「S3」
デプロイしたいS3を選択します。
デプロイする前にファイルを抽出するをチェックします。これをしないと、zipファイルがデプロイされてしまいます。
完成です！
CI/CDを試す
CodePipeline作成後、自動で一度CI/CDが走ります。
これで無事Ｓ３にデプロイされていればＯＫです。
AWSの効果的な学習方法は？
最後に、AWSの効果的な学習方法をご紹介します。
自学自習はUdemy講座
オンラインプラットフォームであるUdemyは安価で手軽にAWSの学習が可能です。
しかし、上記で紹介したような実際のAWSエンジニアが実施している構築スキルまでは教えてくれません。初心者～中級者向けの講座が多くなっています。
私も受講した、初心者向けAWS講座を下記記事でまとめています。ご参考ください。
1人で学習が難しい場合はオンラインレッスン
1人で学習が難しい場合はオンラインレッスンがおすすめです。
最近では、AWS講座を提供するオンラインレッスンも増えてきました。
料金は高くなりますが、現役エンジニアからAWSについて学ぶことができます。
本ブログ執筆者のメンタリングも受付中
本ブログを執筆している[KAITech]もメンタリングを受け付けています。
オンラインレッスンは高くて手が出せないという方は私までお気軽にご相談ください。
下記から承っております。
