[Angular]Angular で作ったアプリを CentOS にデプロイする

Angular で作成したアプリを CentOS にデプロイする手順を説明していきます。

環境

• Angular : 6.x
• CentOS : 7.x
• Apache : 2.4

Angular をビルドする

下記のコマンドを実行して Angular のアプリをビルドします。

ng build --prod

すると、プロジェクトの配下に「 dist 」というディレクトリが作成され、その中の「 プロジェクト名/index.html 」にブラウザからアクセスさせることができれば、 Angular アプリを使えるようになります。

ブラウザからアクセスさせる為には Apache の設定を行う必要があるので、 Apache の設定を行います。

Apache の設定ファイル作成

下記コマンドにて設定ファイルを作成します。

vim /etc/httpd/conf.d/angular.conf

ファイルが作成されたら、 Apache の設定を記述していきます。

# angular.conf

NameVirtualHost [IPアドレス]

<VirtualHost [IPアドレス]>
  ServerName [IPアドレス]
  DocumentRoot /path/to/project/dist/project/
  <Directory "/path/to/project/dist/project">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

[IPアドレス]の部分は適宜、適切なIPアドレスもしくはドメイン名を入力してください。

Apache 再起動

Apache を再起動します。

$ sudo service httpd restart

この状態で、先ほど設定した[IPアドレス]の URL にアクセスします。

http://[IPアドレス]

画面が表示されれば成功です！

最後に

Angular アプリのデプロイは開発の終盤などでしかやらないので、どうしても忘れがちなのでデプロイ方法をまとめて見ました。いずれは手順をきちんと整理してデプロイの自動化ができるように頑張りたいと思います。