完成!Webブラウザで確認Herokuの管理画面で確認まとめVue.js開発環境の準備Vue.jsを使ったWebアプリケーションの開発環境を作ってHeroku上にデプロイしてみようと思います。使ったものをリストアップしておきます。win32-x64私が試した時点のバージョンです。新しいバージョンに変わっているかもしれませんが多分問題ないと思います。導入済みなものがあったら適当に飛ばしてください。Node.jsのインストールNode.jsの公式サイトからダウンロードします。しても最新版じゃないと困る、という方以外は基本的にはLTSを選択した方がよいでしょう。開発用のフォルダの作成場所は任意ですので、適当に作って指定します。フォルダを作成しました。devはdevelopを短縮したものです。CLIのインストールVueの開発に必要ですので、npmコマンドを使ってインストールします。@vue/cliVueプロジェクトの作成まずは開発の土台となるVueプロジェクトを作成します。vueコマンドを使うと簡単にvue開発プロジェクトに必要な一式が作成できます。プロジェクトの一式を格納するフォルダ名を指定します。今回は、vue-sampleとしました。featuresいくつか質問されますが、全部デフォルトのままで良かったと思います(メモするの忘れました)。こんな感じで処理が終わります。servec:\dev>これでVue.jsの開発環境がパソコン上に完成しました。serveで起動してみましょう。serveでもOKです。serveURLが表示されますので、ブラウザでアクセスしてみてください。次のようにVueの初期画面が表示すれば完成です。パソコン上に開発環境を作れればよい方は、ここまでで終了です。あとは、どんどんコードを書いて行きましょう。Webアプリケーションを作るなら、インターネットで公開するところまでやってみましょう。今回は手っ取り早くWebアプリケーションを公開できるHerokuというサービスを使ってやってみます。Herokuってなに?PaaSの一種で、Webアプリケーションをデプロイすればすぐに使える基盤部分を提供しているサービスです。同系だとGoogleのGAE、AWSのEBなどがあります。同じWebアプリケーションをデプロイできるサービスとしてはIaaSがあり、GoogleだとGCE、AWSだとEC2があります。IaaSの方がインフラも含めて構築できるのでノウハウや時間はかかりますが自由度が高いメリットがあります。その反面、PaaSはインフラ知識はほぼ不要でサービス公開まで手軽で早いのですが自由度はIaaSより低くなります。何を優先するかはそのシステムの要件をみて選択しましょう。小難しいことは抜きにして、早く自分のWebアプリを公開したいんだ!という方は、PaaS一択です。HerokuならGitにプッシュするだけで自動デプロイ、Herokuのサブドメインでよければ無料でSSL化までできてしまいます。スポンサーリンクHerokuの準備Herokuアカウントの作成Herokuサービスを利用するには、アカウントの登録が必要です。アカウント登録は無料です。PaaS(サービスとしてのプラットフォーム)です。CLIをダウンロードします。CLIでしかできない操作もあるので、開発者は必須です。Heroku上のWebアプリの起動・停止操作ぐらいしか行わない場合はインストールしなくてよいかもしれません。運用担当者はログを確認できないと不便なのでCLIが必要です。スポンサーリンクHeroku用資材の準備まずは、Herokuのプロジェクト一式を格納するフォルダを作ります。さきほどのVueと同じイメージです。フォルダを作成して、そこを指定します。c:\dev\HerokuHerokuフォルダの中に、今回のプロジェクトフォルダを作成します。今回は、web-frontとしました。こだわらなければ、全部デフォルトのままでよいです。(yes)c:\dev\Heroku\web-front>処理が完了すると、指定した内容でpackage.jsonが作成されます。バイトの空き領域C:\dev\Heroku\web-front>スポンサーリンクHerokuの資材にVue資材をミックスさきほど、パソコン上で動かしたVue.js環境ですが、そのままHerokuに乗せてもうまく動かないので、中身をを少しいじります。フォルダの中に、server.jsを新規作成します。80;app.listen(port);package.jsonの修正Heroku上で動かすにはいろいろ足りていないので、諸々追加します。package.json値は適宜、読み替えてください。Gitにさきほど作ったファイル一式を登録します。C:/dev/Heroku/web-front/.git/資材一式の追加さきほど作ったファイル一式をGitに追加します。src/main.jsサブドメイン決めHerokuにデプロイすると、次のURIになります。https://サブドメイン名.herokuapp.com/このサブドメインの部分を入力します。したら、既に使われていると言われてしまいました。takenこの名前がそのままサブドメイン名になりますので、既に使われている場合はその名前は使えません。別の名前に変更しましょう。サブドメインを名前を変更したら、まだ使われていないようで無事に作成できました。https://git.heroku.com/vue-web-front.gitC:\dev\Heroku\web-front>Webブラウザでアクセスすると場所ができていますね。あとは、ここに作ったアプリケーションを乗せれば動きます。ブランチにプッシュすれば、あとは自動的にビルドとデプロイが動きます。自分でCI組み立てなくてもいいのはPaaSのよいところですね。叩くと、デプロイ先をブラウザを起動して表示してくれます。別に起動中のブラウザにURIを入力する方法でも構いません。openブラウザが起動しました。errorと表示されています。なにかが失敗したようですので、この場合はログを確認しましょう。通常のログと同じようにtailできます。異常終了していました。