配置

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のセットアップ

[GitHub](https://github.com/)にアクセスして、アカウントを作成します。
リポジトリを作成します。
リポジトリにコードをプッシュします。

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にバッジを追加します。

package.json にテストタスクを追加します

  "scripts": {
    "start": "npx gulp",
    "test": "echo \"Error: no test specified\" && exit 0",
    "build": "npx gulp build",
    "slides": "npx gulp slides",
    "docs": "npx gulp docs"
  },

4. Herokuとは

Herokuは、クラウドプラットフォームであり、開発者がアプリケーションを構築、実行、スケールするためのツールを提供します。

4.1. Herokuにアプリをデプロイする手順

4.1.1. Heroku アカウントの作成

Herokuにアクセスして、アカウントを作成します。

4.1.2. Heroku CLI のインストール

Heroku CLIをダウンロードしてインストールします。

4.1.3. Heroku アプリケーションの作成

Herokuにログインします。
heroku create コマンドを実行して、新しいアプリケーションを作成します。
```
heroku create sample-project
```
HTTPサーバーを起動するために、パッケージをインストールして Procfile ファイルを作成します。
```
npm install http-server
```
```
web: npx http-server -p $PORT
```
package.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
```
mainブランチ以外をデプロイする場合は以下のコマンドを実行します。

take01ブランチをデプロイする場合
```
git push heroku take01:master
```
別のアプリケーションを作ってデプロイする場合
```
heroku create sample-project-take01
```
.git/config に以下の内容を追加します。
```
[remote "heroku-take01"]
  url = https://git.heroku.com/sample-project-take01.git
  fetch = +refs/heads/*:refs/remotes/heroku/*
```
以下のコマンドを実行して別のアプリケーションにmain以外のブランチをデプロイします。
```
git push heroku-take01 take01: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
```