@startuml actor 開発者 actor 利用者 cloud "Vercel" as vercel { package "Production Environment" as ui_prd_env { [UI] as ui_prd } } cloud "Heroku" as heroku { package "Production Environment" as api_prd_env { [API] as api_prd [DB] as db_prd } } cloud "GitHub" as github { package "Repository" as repository { [Git] as git } package "Continuous Integration" as ci { [GiHubAction] as github_action } } 開発者 --> repository repository --> heroku repository --> vercel api_prd -> db_prd api_prd <-- ui_prd git -> github_action ui_prd <-- 利用者 @enduml
これは、ソフトウェア開発と展開の高レベルの概要を示す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とデータベースコンポーネントと通信します。
GitHubは、GitリポジトリをホストするためのWebベースのホスティングサービスです。GitHubを使用すると、コードを共有し、他の人と協力してプロジェクトを管理できます。
-
リポジトリを作成します。
-
リポジトリにコードをプッシュします。
GitHub Actionsは、GitHubでホストされる継続的インテグレーション/継続的デプロイメント(CI/CD)サービスです。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にバッジを追加します。
Herokuは、クラウドプラットフォームであり、開発者がアプリケーションを構築、実行、スケールするためのツールを提供します。
-
Herokuにログインします。
-
`heroku create`コマンドを実行して、新しいアプリケーションを作成します。
heroku create jip-episode00
-
HTTPサーバーを起動するために、パッケージをインストールして`Procfile`ファイルを作成します。
npm install http-server
web: npx http-server -p $PORT
package.jsonに以下の内容を追加します。
"scripts": {
...
"heroku-postbuild": "webpack --config ./webpack.config.js --progress"
...
},
-
`git add .`コマンドを実行して、変更をステージングします。
-
`git commit -m "Initial commit"`コマンドを実行して、変更をコミットします。
-
`git push heroku master`コマンドを実行して、アプリケーションをデプロイします。
git push heroku episode/00:master
ここではmasterブランチ以外にもデプロイしています。
Vercelは、サーバーレスのプラットフォームで、フロントエンドの開発者が簡単にWebサイトやアプリケーションをデプロイできるようにするものです。
以下は、Vercelにデプロイする手順です。
まず、Vercelにサインアップする必要があります。Vercelには、GitHub、GitLab、Bitbucket、またはVercelのアカウントでサインアップできます。
-
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