~学習するな実践せよ~TOPNuxt.js環境構築Dockerで作るNuxt.js開発環境Dockerで作るNuxt.js開発環境2019/01/20ここではDockerでNuxt.js環境を構築する方法を紹介します。※dockerのインストールは事前に行っておいてください。Nuxtの画面がブラウザで表示できるところをゴールとします。9000Dockerfile記述まずはDockerfileを記述してコンテナを起動します。["/bin/sh"]Nuxt.jsにブラウザで接続する際に9000番を使用するため、9000番を開放しています。コンテナを起動します。はじめはOSイメージのダウンロードやインストール等が走るので遅いです。nuxt_app_imageコマンドの説明を少しすると、`pwd`:/appここで、起動時にいるディレクトリを起動するコンテナの/appディレクトリにマウントします。コンテナ内でNuxtアプリケーションを作成するとき、ホストOS上にファイルが同期され、コンテナを削除したとしてもプロジェクトディレクトリ自体が残ります。nuxt_appここでコンテナの名前をつけています。この名前はコンテナ接続時に使用します。nuxt_app_imageこれはDockerで使用するイメージの名前です。コンテナはこのイメージをもとに起動されます。shこれで接続完了しました。接続後は/appディレクトリなります。ここでlsを打つと、Dockerfileが表示されているので、無事マウント出来ていることがわかります。nodeコマンド、npmコマンドが使用できるようになっています。続いてNuxtのプロジェクトを作成していきましょう。Nuxtのテンプレートを生成することができるので、ここではNuxtのコミュニティが作成しているテンプレートを使用します。my_nuxt_app上記コマンドを実行すると、いろいろ聞かれますが、プロジェクト名や、プロジェクトの概要、作成者などを聞かれているだけなので、すべてエンター連打で良いでしょう。実行が完了すると、my_nuxt_appというディレクトリが作成されますmy_nuxt_app配下を見てみると、以下のようなディレクトリ構成なっています。README.mdNuxtではあらかじめ、どこにどのファイルを置けば良いか決まっているので、その決まりを守って開発をすることで、自分で考えることが減るのでとても楽ちんです。Vueにはルーティングの仕組みがありますが、Nuxtではルーティングの記述はいらず、pagesディレクトリに配置したディレクトリパスそのものでルーティングができる仕組みになっています。instalNuxtのテンプレートを作成しただけだと、node_modulesが存在しないので、作成して上げる必要があります。installをするだけでOKです。installこれでnode_modulesが作成されます。起動設定コンテナ内でnuxtを立ち上げても、ホストOS(Mac等)のブラウザからはアクセスできません。そのため、Nuxtの設定ファイルでポートとホストを指定する必要があります。},//以下省略ここで9000番を指定しています。ホストOSの9000という風にフォワーディングしています。これでいよいよ起動できます。dev少し時間がかかりますが、ブラウザからhttps://localhost:9000/にアクセスし、以下の画面が表示されれば終わりです。