はじめに
前記事でユーザ入力フォームを作成しwebアプリとして完成した。
今回はAngular公式チュートリアルの最後であるデプロイについて行っていく。デプロイとはコードをコンパイル、ビルドしてwebサーバ上に乗せて一般に公開することである。公開するのは前セクションまでStackBlitz上で編集し行っていたものである。今回はまず、ローカルで実行できるようにした後に本番環境での実装を行う。
前提条件
ローカルで実行するには下記2点が必要である。
Angular CLIは下記コマンドでターミナルからインストールする。
npm install -g @angular/cli
Angular CLIをインストールすることで、これまでコンポーネントやサービスなどを生成してきたngコマンドが使えるようになる。
※npmコマンドとはNode Package Managerの略でNode.jsのモジュールを管理するもの。Node.jsをインストールすると使用できるようになる。
アプリケーションをローカルで実行する
公式ドキュメント通りに、StackBlitz上のソースファイルをローカルにダウンロードする。
cd angular-ynqttp
npm install
npmパッケージのダウンロードとインストールは上記コマンドで行う。オプションを付けることでどのパッケージをインストールするか指定できるが、今回は簡単のため指定せずインストールする。
ng serve
ng serve --port 4201
ng serveコマンドでローカルで実行できる(ローカルサーバの起動)。実行するとURLがターミナル上で表示されるのでアクセスして起動を確認する。
このコマンドの実行中はこれまでと同様にホットリロード機能が働き、ソースの変更が自動で反映される。
アプリケーションのビルドとホスティング
続いて、本番環境でのビルドを行う。
ng build
このコマンドを行うと、distフォルダが作成されることを確認する。このフォルダの中にはJavaScriptファイルが格納されており、実際に編集してきたTypeScriptがコンパイルされ、実行に最適化された結果である。第一回の記事のTypeScriptの説明に記述したとおりである。
ここまで理解できたら十分であり、ドキュメントの最後にFirebase、Google Cloud、App Engineなどのサーバにホスト(配置)すれば実装可能と書いてあるが、実際の実装は今回は割愛する。サーバごとに方法は異なるがサーバの設定をし、dist/my-project-nameフォルダの内容を記述すれば実装できると知っていれば問題なく、各自で調べて実装するのも良いと思う。
おわりに
全6回に渡ってAngularの公式ドキュメントのハンズオンを行ってきた。公式ドキュメントのみでは理解がなかなか難しい部分を補足しながら進めたので、何かの助けになれば嬉しく思う。私自身もまだ初心者であり、私自身の所感であることが多々あるため間違っていたりしたら指摘をお願いします。今後私も振り返りを行う中でアップデートを続けていきたい。では。