興味ない方は読み飛ばしてください。それでは、マウントしたフォルダ以下にプロジェクト作成していきます。画面下の「+ここに新しいプロジェクトを作成する」をクリックします。プロジェクト名は「bulma-project」で。パッケージマネージャーは、npmを選択します。createコマンドで実行した場合に聞かれるプリセットの選択が続きます。デフォルトじゃ足りないので「手動」を選択。必要なパッケージを取捨選択します。Pre-processorsは選択しておきます。選択したパッケージについての設定が続きます。nod-sass)を選択。node-darkというのも選択できますが、よくわかりません。最後に今まで選択したプリセットを保存するか聞かれます。インストールが始まると以下のような画面に。終わったと思ったら、なぜかプロジェクト作成の最後の画面に戻りました。package.jsonしかありません。package.jsonとりあえずログ見てみます。--disturl=https://npm.taobao.org/distはい、エラーがでて見事に失敗してます。結局このエラーの原因および解決方法はわからず。なんとなくですが、ホストがWindowsのフォルダをマウントしておりそこにインストールするとエラーになる模様。模索していると、パッケージマネージャーを「npm」ではなく「yarn」にすればいけました。タスクを実行して無事にvueのWelcome画面が表示されたので出来たと思ったのですが、なんとタスクを切るとコンテナまで落ちる現象が!以上が失敗編です。タスク停止するたびにコンテナが落ちてしまうため、使い物になりませんでした。私の力では原因究明できなかったので、だれか教えてください。コンテナ作成(成功編)ここからやっと成功編です。基本的な手順は同じで、コンテナのもととなるイメージは「node:latest」を使う。手順は失敗編と同じで、注意点はパッケージマネージャーに「yarn」を使うところだけ。画面イメージは失敗編見てください!出来上がったら自動的にプロジェクトダッシュボード画面が表示されます。画面左側メニューの「タスク」を選び「タスクの実行」ボタンを押すとビルドが終了するので「アプリを開く」をクリック無事にvueの画面が開きます。タスク画面から「タスクの停止」ボタンを押してもタスクだけ止まります。コンテナ落ちない!すばらしい!BulmaのインストールそれではBulmaをインストールします。画面からさっくりとできます。メニューの「依存」を選択しプロジェクト依存画面の右上の「依存をインストール」をクリック。0.7.4」を選択し、右下の「bulmaをインストール」をクリックでインストール完了します。Bulmaの設定は、別記事にまとめてます。こちらを参考にSassでのカスタマイズができるように設定。BulmaでSPA環境を5分でつくる!Webシステムをさっくり作る場合、Vue.js便利ですよね。...https://kawadev.net/vuejs_bulma/#tok-3-3Bulmaの導入・設定が終わればWelcom画面は以下のような画面になるはずです。reload)が動作しません。解決方法は同じなので、ポーリングの設定を追加すれば問題ありません。}}css~はsass用の設定値です。これで無事に開発環境ができました。一回作ってしまえば起動は一瞬なので使いたいときにサクッと立ち上げれます。これでWindowsにNode.jsをインストールする必要性は、今のところなくなりました。最後にこの最終系にたどりつくまでに結構時間かかってしまいました。おかげさまでDockerの理解も進みました。今回はDockerfileのみでの環境作成でしたが、実際はdocker-composeでの管理がとても便利なので、1コンテナでもdocker-composeを作るようにしてます。早く使ってみとけばよかったな、Dokcer。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスウェブサイトプロフィール福岡でシステムエンジニアをやっています。フリーランスで活動中です。PHP・C#メインにWebシステムやサーバサイド、サーバ構築等が得意です。