クラウドのtipsを発信。導入はじめにVue.jsの開発のためのクリーンな環境を構築するためにDockerを使った場合の流れをまとめてみました。my-appDocker環境起動Dockerイメージを作成Vue開発に必要なライブラリをGlobalインストールしたDockerイメージを作成します。@vue/cli-service-globalEOFBuildします。作成するDockerイメージ名はdocker-vueとしています。.問題なくイメージが作成できれば、次に進みましょう。以下のコマンドを実行してプロジェクトを作成します。何度か選択肢を聞かれますが、はデフォルトのままで問題ありませんのでEnterキーを連打します。.うまく行けば以下のようなメッセージが表示されます。(数分かかりますのでのんびり待ちましょう。https://vuejs-templates.github.io/webpackこれでVueアプリの「ボイラープレート」(昔はテンプレートやスケルトンと言いました。オプション)ので、ローカルPC上にもソースコードが配置されているはずです。test/Vueの開発用サーバを起動して、本当に利用できるようになっているのかを確かめたいのですが、このままではDockerコンテナ外からアクセスできません。Vueの設定ファイルを一部変更し、コンテナ外からアクセスできるようにします。)を利用して表現するように動作しますが、個人的にはこの方法はすきではありません。フラグメントなしの方式に変更します。./src/router/index.jsその他、Docker上でVueアプリケーションを動作させた場合の問題についても対処しておきます。ローカルPCでファイルを変更しても、Docker上のVueプロセスはファイル変更を検知してくれません。これを検知させるには、以下のコマンドを叩いて設定を変更する必要があります。build/webpack.dev.conf.js起動します。※上記コマンドだとあまりに長いので、以下のようにaliasをさく制しておくと便利です。npm''ブラウザでアクセス「http://localhost:8080」にアクセスしてみましょう。うまく行けばVue.jsの初期ページが表示されるはずです。使うとデザインについて細かいことを考えなくてすみます。(デザインが苦手な僕には助かります。コマンドで以下のライブラリをインストールするのが手っ取り早いです。利用できるようにパッケージのロード処理を追記しておきます。コメントをキャンセルこの記事のトラックバックURLプロフィール@genzouw5人の子供を持つのおとうちゃん。参考になりましたら、シェア、コメント、支援をいただけると励みになります!システム構築の相談ものります。お問い合わせはこちら。