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を再起動します。

service httpd restart

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

http://[IPアドレス]

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

最後に

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

プログラミングAngular, CentOS

Posted by KoE