この記事は、5分で読めます。
はじめに
- ビルドしたアプリケーションを手元で動かしたいときありますよね。
- docker hubからnginxのイメージを取ってきて、静的コンテンツ化したアプリをコンテナ上で動作させます。
- アプリは、nuxt3で作っています。
目次
- やっていること
- 手順
やっていること
何をしてるんですか？
以下の流れで、タイトル通りのことをしています。
- nuxtで作成したアプリケーションをビルド(静的コンテンツ化)する
- docker hubからnginxのイメージをpcに取り込む
- nginxを含むコンテナを起動してnginxサーバーでnuxtアプリをホスティングする
これを実施して何が良いんですか？
本番環境に近い条件でアプリケーションを動作させることができます。
例えば、ローカルでは想定通り動作するけど、デプロイしたら動作しないみたいな時に、いちいちデプロイしなくても検証できます。
※ローカルでは：ローカルでサーバを起動して、localhost:3000とかでアクセスする
nginxってなんですか？
まず発音は、エンジンエックスです。
webサーバーとかリバースプロキシとして使えるソフトウェアです。
本記事でも紹介するように、静的コンテンツのホスティングとかができます。
特徴としては、高性能なので、たくさんの人がwebサイトに訪れても、各々に落ち着いてページをみせてくれます。
手順
docker上のnginxでnuxtアプリを動かす手順は、4ステップです。
１：nuxtアプリのビルド
yarnでビルドします。
yarn generate
以下のように出力されたら成功です。
distディレクトリが生成されてるはずです。（環境によっては.outputって名前かも）
ここにビルドされたものがあるので、絶対パスをメモってください。
2:nginxのイメージのpull
docker hubからnginxのイメージをローカルpcに取り込みます。
適当なディレクトリで以下コマンドを実行してください。
（Docker Desktopが起動していることを確認しておく）
docker image pull nginx
上記を実行したら、以下のコマンドを実行することでpullしてきたnginxのイメージを確認することがきます。
docker images
これであなたは、準備整い親方です。どすこい！
ちなみに、docker hubのnginxは以下から確認できます。
3:コンテナを起動
１、２が完了したら、コンテナを起動して、静的コンテンツをホスティングします。
以下のコマンドで実施できます。
docker run -d -p 8080:80 --name <コンテナに任意の名前をつける> -v "distまでの絶対パス":"/usr/share/nginx/html" <イメージの名前>
docker desktop上で起動していることを確認できます。
コマンドの解説をします。
docker run：Dockerコンテナを起動するためのコマンド（指定したイメージからコンテナを作成）
-d：バックグラウンドでコンテナを実行します。なので実行後のコンソールはコンテナのものではなく、ローカルpcのコンソールになります。
-p：ポートマッピング
8080：ローカルpc側のポート（予約されてなければ、なんでもok
80：コンテナ側のポート
--name：このオプションの右隣に入力した文字列で、コンテナに名前をつける
-v：ホストマシン上のディレクトリやファイルをコンテナ内の特定のパスにマウントする
"distまでの絶対パス"：ビルドしたnuxtアプリがある場所
/usr/share/nginx/html：nginxウェブサーバーのデフォルトのドキュメントルートディレクトリ。ウェブサーバーが静的ファイル（HTML、CSS、JavaScriptなど）をホストするために使う場所
<イメージの名前>：起動したいコンテナイメージの名前
4:ホスティングしたアプリケーションを確認する
以下のurlをブラウザに打ち込んで、アプリケーションを表示できたら完了です。
http://localhost:8080/
補足
コンテナ起動後、コードを改変した場合は再度、ビルド(yarn generateしてねって意味)からやり直す必要があります。
また、dockerコンテナにおいても、以下のコマンドで停止後に削除してから、手順1〜４を実行してください。
削除せずに手順３のコンテナ名を同じにして実行すると、すでに同一名のコンテナが存在すると怒られるためです。
コンテナを停止する
docker stop <任意のコンテナ名>
コンテナを削除する
docker rm <任意のコンテナ名>
おわりに
nginxってエンジンエックスって読みにくいっくす。