dev」で動作するwebpack-dev-serverを使っていますが、ビルド後の動作をnginxで確認したいと思い、dockerで環境構築しました。vue自体の環境もdocker上のコンテナで構築し、ローカル環境を汚さないようなコンテナ構成にしています。備忘録をかねて、コードやディレクトリ構成などを書いていきます。「Vue_docker」といったディレクトリを作り、それをルートディレクトリとして解説していきます。全体のディレクトリ構成は以下です。DockerfileDockerfileを各ディレクトリで作成まず、nginxとvueディレクトリを作成します。vue次に、nginxディレクトリ内で、Dockerfileを作成、記述します。lessそのあと、同じくvueディレクトリ内にもDockerfileを記述。vue-cli両方やっていることは単純で、dockerイメージを取得後、最小限のコマンドを走らせているだけです。docker-composeファイルを作成(docker-composeをインストールしていない場合は、まず先にインストールする必要があります。)それぞれのDockerfileを作成できたら、ルートディレクトリ(vue_docker)にdocker-compose.ymlを作成します。docker-compose.ymlファイルは、各コンテナを連結させて動かすための設定ファイルのようなもの。これがないとコンテナ起動時にとんでもなく冗長なコマンド入力が必須になります。true内容について簡単に解説します。services以下には、同時に起動させる各コンテナを指定します。今回は「nginx」、「vue」と記述していますが、自由に設定できます。次にbuildについて。docker-composeでは、各Dockerfileを参照してコンテナを起動させます。その際、どのDockerfileを参照するのかをパスで指定してあげる必要があります。nginxコンテナはnginxディレクトリ内のDockerfileを、vueコンテナについてvueディレクトリ内のDockerfileのパスを指定してあげます。portsは、ホスト側のポート(今回はmac)とコンテナ側のポートを連結させるパラメータです。'9000:80'と書けば、ホストマシンの9000番ポートとnginxコンテナの80番ポートが連結することになります。最後にvolumesです。volumesは、ホスト側の指定したディレクトリと、コンテナ側の指定したディレクトリを同期させるパラメータです。同期が必要かと言うと、コンテナはデータを永続的に保管することができず、コンテナを廃棄するたびに初期化されてしまうため。コンテナを廃棄すると作業内容が丸々吹っ飛んでしまうため、ホスト側にデータを同期させて、永続的に保管できるようにしてあげる必要があるんですね。新規にコンテナを作成した際には、ホスト側の同期しているディレクトリ内容を参照し、その状態を自動的に再現してくれるため、前回の作業状態のまま作業を開始できます。コンテナをbuildするdocker-compose.ymlを記述できたら、以下のコマンドを実行してコンテナを起動します。-ddオプションはコンテナをバックグラウントで起動するオプションです。無事にコンテナが起動しているかどうかは、以下のコマンドで確認できます。ps「State」がUpになっていればOKです。nginx」でログを見て、エラーの原因を確認しましょう。無事、コンテナが起動できたら、次はvueコンテナの中に入ってvueアプリケーションを作成します。以下のコマンドを実行してください。これで/app以下にvueアプリケーションが作成されます(lsコマンドなどで確認)。build」を実行し、ビルドを行なっておきましょう。distディレクトリが新たに作成されていればOKです。作成が完了したらexitコマンドでコンテナを脱出し、/vue_docker/data/www/以下にコンテナでの変更が反映されていることを確認しましょう。これは、docker-compose.ymlで設定したvolumesパラメータによるものです。nginxのserver.confファイルを編集ここまででコンテナ内にvueアプリケーションを作ることができました。このままではnginx上でアプリケーションを動かすことができません。その目的を達成するために、nginxのサーバー設定を行いましょう。nginxディクレトリ以下にserver.confファイルを作成します。主要なパラメータの解説は以下。80:80番ポートを解放server_name:このサーバーにアクセスする際のURL。root:サーバー上で公開するディレクトリのルートパスindex:ルートURLにアクセスした場合に表示するファイルを指定vueアプリケーションはビルド内容が/dist以下に展開されるので、rootもそれに合わせて設定する必要があります。最後に、localhost:9000にアクセスして、vueアプリケーションが表示されることを確認します。buildを行い、ビルドを行なっておきましょう。nginxの解放ポートは80番ですが、今回、ホストマシンとコンテナの連結は9000番ポートで行なっているので、localhostの後ろに9000をつける必要があります。これでdockerを使って、nginx上でvueアプリケーションを動作させることができました。devを実行すれば、webpack-dev-server(ビルトインサーバー)を起動することもできます。docker、nginxともにまだまだ勉強中ですが、どんどん使って慣れていきたいところです。requestStockLike19akahixi@akashixi29歳未経験からWeb系エンジニアとして働き始めました。拙いながらも積極的にアウトプットしていこうと思います。upLoginユーザーは見つかりませんでした。