1. システムアーキテクチャ
これは、ソフトウェア開発と展開の高レベルの概要を示すUMLダイアグラムです。開発者、本番環境、およびリポジトリの3つの主要なコンポーネントが示されています。
開発者はアクターによって表され、利用者のアクターもあり、ダイアグラム上では「利用者」と表記されています。
本番環境には、Webアプリケーションを展開するためのプラットフォームであるVercelとHerokuの2つのクラウドがあります。本番環境は、「Production Environment」のUIのためにUIコンポーネントのみを含むパッケージと、「Production Environment」のAPIとデータベースを含むパッケージの2つに分かれています。
リポジトリは、Gitバージョン管理システム「Git Hub」と継続的インテグレーションシステムの「GitHub Action」という2つのパッケージを含むGitHubクラウドで表されています。
このダイアグラムは、開発者がコードをリポジトリにプッシュすることで、GitHub Actionを使用した継続的インテグレーションプロセスがトリガーされることを示しています。継続的インテグレーションプロセスは、コードをビルドしてテストし、VercelとHerokuの本番環境の両方に展開します。
最終的に、利用者はVercelのUIコンポーネントを介してアプリケーションとやり取りし、Herokuの本番環境のAPIとデータベースコンポーネントと通信します。
2. GitHubとは
GitHubは、GitリポジトリをホストするためのWebベースのホスティングサービスです。GitHubを使用すると、コードを共有し、他の人と協力してプロジェクトを管理できます。
2.1. GitHubのセットアップ
-
リポジトリを作成します。
-
リポジトリにコードをプッシュします。
3. GitHub Actionsとは
GitHub Actionsは、GitHubでホストされる継続的インテグレーション/継続的デプロイメント（CI/CD）サービスです。GitHub Actionsを使用すると、コードの変更を自動的にビルド、テスト、デプロイできます。
3.1. GitHub Actionsのセットアップ
-
リポジトリに`.github/workflows`ディレクトリを作成します。
-
ワークフローファイルを作成します。
`node.js.yml`を作成します。
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
name: Node.js CI
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
- run: npm test-
レポジトリにコミット・プッシュしてワークフローを有効にします。
-
READMEにバッジを追加します。
4. Herokuとは
Herokuは、クラウドプラットフォームであり、開発者がアプリケーションを構築、実行、スケールするためのツールを提供します。
4.1. Herokuにアプリをデプロイする手順
4.1.1. Heroku アカウントの作成
4.1.2. Heroku CLI のインストール
4.1.3. Heroku アプリケーションの作成
-
Herokuにログインします。
-
`heroku create`コマンドを実行して、新しいアプリケーションを作成します。
heroku create jip-episode00-
HTTPサーバーを起動するために、パッケージをインストールして`Procfile`ファイルを作成します。
npm install http-serverweb: npx http-server -p $PORTpackage.jsonに以下の内容を追加します。
"scripts": {
...
"heroku-postbuild": "webpack --config ./webpack.config.js --progress"
...
},4.1.4. アプリケーションのデプロイ
-
`git add .`コマンドを実行して、変更をステージングします。
-
`git commit -m "Initial commit"`コマンドを実行して、変更をコミットします。
-
`git push heroku master`コマンドを実行して、アプリケーションをデプロイします。
git push heroku episode/00:masterここではmasterブランチ以外にもデプロイしています。
4.1.5. アプリケーションの起動
-
`heroku open`コマンドを実行して、アプリケーションを起動します。
5. Vercelとは
Vercelは、サーバーレスのプラットフォームで、フロントエンドの開発者が簡単にWebサイトやアプリケーションをデプロイできるようにするものです。
5.1. Vercelにデプロイする手順
以下は、Vercelにデプロイする手順です。
5.1.1. Vercelのサインアップ
まず、Vercelにサインアップする必要があります。Vercelには、GitHub、GitLab、Bitbucket、またはVercelのアカウントでサインアップできます。
5.1.2. ビルドコマンドの入力
次に、アプリケーションのビルドコマンドを入力する必要があります。ビルドコマンドは、アプリケーションをビルドするために必要なコマンドです。
5.1.3. 環境変数の設定(必要な場合)
必要に応じて、環境変数を設定することができます。環境変数は、アプリケーションで使用される変数です。
5.1.4. デプロイするブランチの選択
次に、デプロイするブランチを選択する必要があります。通常、デプロイするブランチは、masterブランチです。
5.1.5. デプロイの開始
最後に、デプロイを開始する必要があります。デプロイが完了すると、VercelはURLを提供します。
5.1.6. デプロイの確認
デプロイが完了したら、Webサイトやアプリケーションを確認することができます。
5.2. VercelにCLIでデプロイする手順
-
Vercel CLIをインストールする Vercel CLIをインストールするには、ターミナルで以下のコマンドを実行します。
npm install -g vercel-
Vercelにログインする Vercel CLIを使用するには、Vercelにログインする必要があります。以下のコマンドを実行して、Vercelにログインしてください。
vercel login-
プロジェクトをデプロイする webpack.config.jsのビルドファイルの出力先をpublicに変更します。
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},Vercel CLIを使用して、プロジェクトをデプロイするには、以下のコマンドを実行します。
vercel