AngularアプリをHerokuにデプロイする
AngularアプリをHerokuにどうやってデプロイするのか気になったので、調査・検証しました。"ng new"で作成されたAngularプロジェクトをGithub経由でデプロイすることができたので、手順を記録しておきます。
手順
- "ng new <アプリ名>"でAngularプロジェクトを作成する
- Angularプロジェクトをデプロイ用に修正
- AngularプロジェクトをGithubリポジトリに登録する
- Herokuにて"Create new app"をクリック。アプリ名とデプロイ方法を設定（Github連携を指定）
- Githubリポジトリの更新が起きるたびに、自動ビルド・デプロイが行われる。（手動でのビルドも可能）
各手順の内容を書いていきます。
Angularプロジェクトの作成
任意のフォルダにて、"ng new <アプリ名>"を実行します。（本記事では"angular-heroku-app"という名前でプロジェクトを作成しました。）
作成されたプロジェクトの構成は以下の通りになります。
cdコマンドでプロジェクト内に移動して、"ng serve"を実行します。すると、Angularアプリをローカルで起動することができます。ブラウザ上で"http://localhost:4200"にアクセスすることで、起動中のAngularアプリを利用できます。
Angularプロジェクトをデプロイ用に修正
AngularアプリをHerokuでも使えるようにするために、プロジェクトを修正します。以下の手順を実施しました。
- npmでexpressパッケージをインストール
- "ng build --prod"を実行。（やらなくても良い）
- server.jsを作成し、ローカルでアクセスできるか試す。（やらなくても良い）
- package.jsonにて"start", "build"項目を修正
まず、プロジェクトルート内で"npm install express --save"を実行し、expressパッケージをインストールします。
次に、"ng build --prod"を実行し、プロジェクトをローカルでビルドします。ビルドがうまくいくと、プロジェクトフォルダ内にで"dist/アプリ名"のフォルダが生成されます。
ビルドが上手くいったら、プロジェクトロート直下にserver.jsを作成し、Webサーバーを実装します。
const express = require('express'); const path = require('path'); const app = express(); // 'dist/アプリ名'を指定 app.use(express.static(path.join(__dirname, 'dist/angular-heroku-app'))); // 'dist/アプリ名/index.html'を指定 app.get('/*', (req, res, next) => { res.sendFile(path.join(__dirname, 'dist/angular-heroku-app/index.html')); }); app.listen(process.env.PORT || 8080);
プロジェクトルートにて、"node server.js"を実行してみます。ブラウザで"http://localhost:8080"にアクセスし、Angularアプリが上手く動作するか確かめます。
最後に、package.jsonにて、start項目とbuild項目を修正します。start項目は"node server.js"を設定し、build項目は"ng build --prod"を設定します。
AngularプロジェクトをGithubリポジトリに登録
作成したAngularプロジェクトをGithubリポジトリに登録します。まずは、Githubにてリポジトリを作成します。Githubにログインして、"new repository"をクリックします。
Githubリポジトリを作成したら、ローカルのAngularプロジェクトをGithubリポジトリに登録します。この時、ブランチ名を"master"から"main"に変更しています。
Herokuでアプリを作成
Herokuにログインし、画面右上の"Create new app"をクリックします。すると、アプリ名を入力する画面になります。この時、他のデプロイされているアプリの名前と被らないようにする必要があります。
"Create App"ボタンをクリックすると、デプロイ方法を選択する画面に移ります。今回Githubを使ったデプロイのため、Deployment method項目にてGithubを選択します。すると、Githubリポジトリを入力する項目が出てくるため、デプロイするリポジトリ名を入力します。リポジトリ名を入力が"Search"ボタンを押すと、"Connect"ボタンが出てきます。Connectをクリックすることで、次の設定へ進めます。
"connect"ボタンを押下後、"Automatic deploys"項目と"Manual deploy"項目が出てきます。"Automatic deploys"項目では、Githubリポジトリを更新するたびに、自動ビルド&デプロイを実行するかを設定できます（CIの設定ができる）。"Enable Automatic Deploys"ボタンをクリックして、自動デプロイを有効化します。
Manual deployでは手動デプロイを実行できます。"Deploy Branch"ボタンをクリックすることで、GithubリポジトリをHerokuにデプロイします。
デプロイ後
自動デプロイもしくは手動デプロイが上手くいくと、"https://アプリ名.herokuapp.com"でアプリを利用できるようになります。
感想
デプロイ方法が思いのほかシンプルで扱いやすかったです。さらに、Githubリポジトリの更新をトリガーに、Herokuで自動ビルドが行われるのが非常に便利に感じました。
Angularに関して、まだまだ知識が浅いため、引き続き学習に努めたいと思います^^
