
このコースの概要や構築する題材、対象者や前提知識を確認します。
このコースを受講するときの進め方について説明します。
このコースで発生する可能性のある、AWS の料金について説明します。
このセクションで実施する内容を確認します。
このコースで使用する開発環境として、Cloud9 の環境を作成します。
このコースで使用するサンプルアプリケーションの概要と構成を説明します。
サンプルアプリケーションを Cloud9 にアップロードします。
サンプルアプリケーションのサーバサイドで使用している TypeScript と Node.js、npm の概要を学びます。
Cloud9 に Node.js の使用するバージョンをセットアップします。
Web アプリケーションの開発モードと本番モードについて学び、サンプルアプリケーションを開発モードで動かしてみます。
サンプルアプリケーションの自動テストを実行しながら、自動テストの実行方法を学びます。
よく分からないと言われやすい「ビルド」とは何かをしっかり学びます。
Cloud9 上でサンプルアプリケーションをビルドして動かしてみます。
このセクションのまとめをして、後のセクションへの繋がりを説明します。
混乱されやすい「フロントエンドのビルド」について補足します。
このセクションで実施することと、Git・GitHub の概要を説明します。
GitHub でこのコースで使用するためのリポジトリを作成します。
Cloud9 と GitHub の連携のため、SSH の設定を実施します。
おさえておきたい Git のコマンドを最小限学びます。
サンプルアプリケーションのソースコードを GitHub に push します。
このセクションで実施することと、GitHub Actions、CI(継続的インテグレーション)の概要を説明します。
GitHub Actions の Hello World を実施します。
GitHub Actions 上で自動テストとビルドを実行する、CI のワークフローを構築します。
GitHub Actions に登場する基本概念と、ワークフローの設定ファイルの基本を学びます。
GitHub Actions でアーティファクト(ビルド成果物)を保存する方法を学び、設定してみます。
ジョブのステータスを踏まえてステップの実行を制御する方法を学びます。
GitHub Actions でワークフローを定期実行する方法を学び、実際に設定してみます。
このセクションのまとめをして、README にバッジを設定してみます。
CI のためのツール・サービスとして、どのようなものがあるか紹介します。
このセクションで実施することと、Step CI の概要を説明します。
Step CI をインストールしてみます。
npm のローカルインストールとグローバルインストール、dependencies と devDependencies について学びます。
Step CI のテストを記述して実行してみます。
Node.js のツールを実行するための npx と npm scripts の基本を学びます。
Step CI を GitHub Actions で実行するよう設定します。
CI ワークフローの中でアプリケーションの起動を待つため、wait-on を導入します。
このセクションのまとめをして、GitHub Actions などで使えるツールを紹介します。
このセクションで実施することと、AWS・EC2 の概要を説明します。
EC2 インスタンスを作成する前準備として、SSH 接続のためのキーペアを作成します。
バックエンドのデプロイ先となる EC2 インスタンスを作成します。
Cloud9 から EC2 インスタンスに SSH 接続してみます。
rsync コマンドを使い、Cloud9 から EC2 インスタンスにビルド成果物を転送します。
EC2 インスタンスに、使用するバージョンの Node.js をインストールします。
EC2 インスタンスでサンプルアプリケーションのバックエンドを実行し、動作確認します。
環境構築の必須知識である、プロセスと確認するコマンド、ポートを確認するコマンドを学びます。
Linux サーバでの環境構築でおさえておきたい systemdについて学びます。
systemd でアプリケーションを動かすための設定を実施します。
ログを確認してエラーを解決する流れを体験します。
改めて systemd でサンプルアプリケーションのバックエンドを実行し、動作確認します。
このセクションのまとめをして、「デプロイ」という単語について整理します。
このセクションで実施することと、CD(継続的デリバリー・継続的デプロイメント)について説明します。
デプロイの自動化に先立って、手作業でサンプルアプリケーションのバックエンドを更新する手順を試します。
手作業で実行したコマンドをもとに、GitHub Actions での自動デプロイを設定してみます。
バックエンドのデプロイに必要な、秘密鍵などのシークレットを GitHub に保存します。
GitHub Actions から EC2 インスタンスに SSH 接続するための設定を実施します。
ビルドのジョブで保存したアーティファクトを、デプロイのジョブで取得する設定を実施します。
このセクションのまとめをして、Git のブランチ戦略と CI/CD の構成について学びます。
このセクションで実施することと、静的サイトホスティングサービスの概要を説明します。
サンプルアプリケーションのフロントエンドをホスティングする S3 バケットを作成します。
AWS CLI を使い、S3 バケットにフロントエンドの HTML と JavaScript をアップロードします。
S3 バケットの静的サイトホスティングの設定を実施して、Web サイトを公開します。
ブラウザ上の JavaScript からアクセスするバックエンドの API の URL を修正します。
バックエンドの API から取得したデータをブラウザ上に表示するため、CORS の設定を実施します。
このセクションで実施することを説明します。
GitHub Actions で S3 に自動デプロイするための設定を実施します。
AWS の認証認可のサービスである IAM の基本を学びます。
IAM User のアクセスキーを使用して、GitHub Actions から S3 にデプロイしてみます。
IAM User のアクセスキーを使用する問題点と、対応策としての OpenID Connect による GitHub Actions と AWS の連携について学びます。
OpenID Connect による GitHub Actions と AWS の連携を設定してみます。
GitHub Actions のワークフローを、変更されたファイルのパスごとに実行するよう設定します。
このセクションのまとめをして、React や Vue.js などの SPA をデプロイする場合について補足します。
このコースを終えたあと、さらにステップアップする方向性を紹介します。
このコースの終了後、片付けるべき内容を説明します。
近年、自動テストや CI/CD(継続的インテグレーション/継続的デリバリー)といったプラクティスが一般的になり、エンジニアが学びたいスキルとして挙げられることが多くなっています。
数ある CI/CD のツール・サービスの中でも、GitHub Actions は特に利便性が高く、多くの場面で使われています。
しかし、GitHub Actions や CI/CD に興味を持っているが、学習するきっかけがなくよく分からないままになっている方はすくなくありません。
また、プログラミングの基礎を学んだあと、「自動デプロイ」に挑戦しようとしたが、何から勉強すればいいか分からず困っているという方も多いです。
そして、実は「ビルド」や「デプロイ」といった言葉が何を指しているのかあまりよく分かっていない、という方も多いです。
そこでこのコースでは、GitHub Actions を使って、自動テストやビルド・デプロイの基本から、CI/CD に役立つ様々なツール、AWS への自動デプロイまで、手を動かしながら素早く学んでいきます。
更新履歴
2023/09/26:レクチャー「(追記)EC2 に Node.js をインストールするコマンドについて」を追加
2024/08/05:レクチャー「(追記)AWS Cloud9 新規利用終了のための代替環境について」を追加
2025/02/01
レクチャー「(追記)アーティファクトの保存のアクションのアップデートについて」を追加
レクチャー「(追記)アーティファクトの取得のアクションのアップデートについて」を追加