・ビルド, 基本的にはこのターミナル上で行いますので、ご注意ください。 cli.vuejs.org, ただNODE_ENVを上書きしてしまうので、ステージングの時に切り替えたい部分でNODE_ENV === 'staging'を判定に使うことができないため、VUE_APP_MODEという変数を追加して使うことにした。 目次 概要 検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.… 私の中では、こうなった原因として, という想定がありましたが、とりあえず単一ファイルコンポーネント化することで解決できるか試してみようと考えました。, そこでさくらのVPS上に環境を整え、単一ファイルコンポーネントを使ったアプリケーション開発(サンプルアプリ)を実施し、その画面を「Fetch as Google」で確認したところ想定通りの画面が表示されました。, ・nodebrewの導入 本番はdist-productionに書き出されるようになった。 再度「Fetch as Google」でbotがどのようにみているかを確認したところ、, 一部のコンテンツ作成の部分をwebpack管理外に置いていましたが、それがダメだったみたいです。 chromeのdeveloper consoleのエラーを見ながら設定しておく。, Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）), WEBアプリ開発者。最近のメインはPython, Vue.js, Firebase, GKE。, uyamazakさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？, Powered by Hatena Blog ・テンプレートの作成 webpackでコンパイルされない部分はうまく表示されないのかな、と思ったり。 上記で書いた環境変数を使ってディレクトリを変える関数を作って切り替えた。, この設定でステージングはdist-stagingディレクトリに、 ただし、これもまた知識不足とか、検索能力不足なのか、こうなったところでそのような悪影響があり、どのように対応していいかわかりません。。。 ブラウザでfile:///Users/{{ユーザー名}}/projects/vue/skylimit にアクセスしてもこの時点では何も表示されません。, ◆作成したサンプルプロジェクトに移動 でもそういった知識が乏しいため、はっきりとした答えはわかりません。。。, 先ほどの画像をみていただくとわかりますが、「貴サイトへの訪問者にはこのページが以下のように表示されます。」と記載されている画面は真っ白になります。 まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。 $ npm install -g vue-cli $ vue - … ここは環境によって異なることがあるので、コンソールなどを確認して微調整してください。, ◆dist配下のソースを移動 LTSと記載されている方(推奨版)をお勧めする。 Node.js. これは最悪ですね。いくら頑張って作っても、世の中に広まることはほぼないでしょう。, 実はなぜこうなったのかははっきりしません。悪いところはあれ？これ？といった具合に、想定はできても、本当のところの理由ははっきりしません。 ・サンプルプロジェクトの確認 ・yarnの導入 vue-cliの環境構築. yagish履歴書は、システム1人、デザイン1人、イラスト1人、計3人の小さなチームで作っていて、開発は非常に身軽なので、本番公開時もローカルの開発環境＋Firebase本番環境だけだった。, でもさすがに大きな変更を本番でやるのは怖いので、手間と費用をなるべく抑えつつ、Firebaseを使ったステージング環境を構築することにした。, ステージング環境について公式ドキュメントに書いてあるので、参考にする。 【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】 前提 ・Macで実施しています(Windowsなどは方法が異なる場合があります)経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使ったテンプレート)を… 例えば、ここで作成された「skylimit」を世の中に公開するために、作成したソースコード群をアップロードすると思いますが、アップロードするのは先ほどのビルドで作成された「dist」直下にある「index.html」と「statc」ディレクトリだけです。, 2 : dist/index.htmlをskylimit直下に持っていき、index.htmlを上書き, 3 : dist/staticディレクトリを、こちらもskylimit直下に持っていき、上書き, file:///Users/{{ユーザー名}}/projects/vue/skylimit/dist, にアクセスしましょう。 現行バージョンでは、vue-cliで以下のように叩くことでコマンド一つで導入が可能となっております。 terminal $ vue init potato4d/vue-dev-template 基本的な開発環境 アプリケーション基盤 Vue.js. /api-staging → ステージングバックエンド, というように振り分けるようにして、APIではどちらのパスも同じ処理へルーティングして同じコンテナでどちらでも動くようにした。 あんまりきれいじゃない。 Vue側は環境変数で切り分ける。, 許可ドメインの設定はFirebaseや、GoogleのAPIキー、Cloud StorageとかDjangoとか使ってるサービスごとにやるので何気にめんどう。 このままだとパスの指定がうまくいかないので、相対パスとして以下のようにします。, assetsPublicPathを空にしました .env.staging, 開発環境はDockerコンテナで行っているが、これを本番、ステージングなどで分けてしまうと面倒くささが圧倒的に増すのでやりたくない。 distディレクトリは間違わないよう消しておいた, 次にFirebase Hostingでデプロイ先プロジェクトを分ける設定。 ※ここはさくらのVPSにSSH接続した状態で行うのではなく、ローカル環境で実施してください。, これで環境は整いました。あとはサンプルコードを入れて表示されるか確認するだけです。, vue-cliを使って、サンプルプロジェクトを作成します。 ・Node.jsの導入 ご自分の作成したプロジェクトに移動しましょう。ここではskylimitに移動します。, 「npm run dev」では何をやっているかと言うと、webpackでコンパイルしたものを、模擬的に「http://localhost:8080」で確認できるようにしています。裏を返すと、webpackでコンパイルされていないもの、つまり「file:///Users/{{ユーザー名}}/projects/vue/skylimit」にアクセスしても、何も表示されません。, ビルドを行う前の準備です。 | ブログを報告する, Vue CLIでVuetify、TypeScript、テストランナーにJestを使った…, Vue CLI 3でのindex.htmlはVueのテンプレートシンタックスは使…, Vue.jsでは、The Progressive JavaScript Frameworkを掲げる通…, Vue.jsとFirebaseで本番環境、ステージング環境をなるべく節約して構築する, Vuetify + Jestで[Vue warn]: Unknown custom elementが…, Vue CLI 3のindex.htmlでif文を使い本番環境とその他で出し分けする, ぼくが考えた最強のFirebase Functionsのファイル構成を考えてる途中, TypeScriptでオプション的なオブジェクトをデフォルト値つきでいい感じに扱う, Googleスプレッドシートを一行ずつJSONのファイルにしてGoogleドライブに書き出す. またドメインを分けるとSSL証明書とかの手間も増えるのでドメインも同じにしたい。, 今回はHTTPSロードバランサーの設定でアクセスしてきたパスでバックエンドを分けた。, /api → 本番用バックエンド ここで開発環境と同様の画面が表示されていれば完了です。うまく表示されていない場合はコンソールにエラーがないか確認してみてください。, 私が上記でビルドしてできたdist配下を本番にリリースしてみました。 上記のビルドが完了すると、「dist」ディレクトリが作成されて、その配下に「index.htmlファイル」「staticディレクトリ」が配置されます。これをドキュメントルートに持っていくことで、本番環境でも動くようになります。, この中で、本番にリリースするものは一つもありません。私はここでハマりました。あくまで本番に必要なものを作成するためのものと言うことです。 ◆最悪の結果 知っている方がいらっしゃいましたら、コメントいただけると嬉しいです。, 以上になりますが、Nuxt.jsを使う方法なども検討していますが、とりあえずはこのまま進もうと思います。 javascriptのフレームワークとしてお馴染みのVue.jsですが、自分で一から環境構築やプロジェクトを作成するのは大変ですし、知識も必要になってきます。そこでコマンドを入力するだけでVue.jsの環境やプロジェクトのテンプレートファイルが一式で揃えられる「vue-cli」を導入とプロジェクト作成からビルドの方法までをまとめていきたいと思います。, こちらの記事はVue CLIのバージョンが2系のものとなります。新しいバージョンのVue CLI3系のインストールと環境構築についてはこちらの記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」をご覧ください。, その前に、vue-cliはnode.jsの環境が必要になりますので、あらかじめインストールをしておきます。詳しくはこちらの記事「WEB開発環境（Mac OS）に必要な各種インストール方法まとめ（1）」にもまとめておりますので参考に。, まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。, vue-cliがインストールできたら、Vueプロジェクトのテンプレートを用意していきます。まずはプロジェクト用のディレクトリを作成し、その場所まで移動します。そして下記コマンドでテンプレートを作成していきます。, テンプレートの種類はいろいろあるのですが「webpack」がよく使われるようです。プロジェクト名は下記のように任意の名前をつけておきます。, すると、初期設定が始まり、質問に対して答えていく形で進めていきます。まずはプロジェクト名から確認・変更で適宜、情報を入力、エンターで確定させて進めていきます。, 次にプロジェクトの説明文を入力します。こちらも適宜入力していきます。続いてプロジェクトの作者名の情報をいれていきます。, そしてVue.jsのモードを選択します。コンパイラを含めるかどうかの違いで上下キーで項目の変更可能です。, 次はvue-routerのインストール確認です。Yでインストール、nでインストール無しが選択できます。, ESLintのインストール確認です。必要に合わせてインストールしていきます。インストールする場合にはタイプを選択することになり適宜選択します。, 続いて自動単体テストツールのインストール確認です。こちらも必要に合わせてインストールします。同じくインストールする際には種類を選択します。, そして自動E2Eテストツールのインストール確認です。こちらも必要であればインストール可能です。, 最後に、各種モジュールのインストール方法確認です。NPM経由かYarn経由で問題ないでしょう。, これらの設定が完了するとリソースのインストールとプロジェクトのセットアップが開始され、終了するとローカルホストで動作確認できる開発用のコマンドが表示されます, では早速下記のコマンドでVueプロジェクトのソースコードをビルドしてローカル環境で確認してみます。, 開発用モードでローカルホストのサーバーが起動しているので、「http://localhost:8080」でアクセスすると下記のようなページが表示されます。, Vue.jsのプロジェクトは主に下記の構成でファイルが生成されます。設定によって多少の違いはありますが、重要なものは下記になります。, 上記以外にも、package.jsonや.gitignore、.babelrcなどの設定ファイルが含まれています。また初回ビルド以降では、後述にあるビルドされたファイルが含められるdistフォルダもあります。, 下記コマンドでプロジェクト内srcフォルダに含まれるソースコード一式を、デプロイ用にビルドします。, PROJECT_ROOT配下の同階層にdistフォルダが生成され、その中にあるindex.htmlとstaticフォルダの一式を本番サーバーにアップロードしてデプロイ完了です。また、メッセージにもある通り、静的ファイルであるもののウェブサーバー上でないと動作しないので注意が必要です。, いかがでしょうか、Vue.jsを使ってウェブアプリケーションを構築する際には、このようにVue CLIを使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです！, DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。, 記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。, 内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。, 「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」. 開発サーバーの実行、ステージング用ビルド、本番用ビルドもすべて一つのコンテナで行う。, まず、buildコマンドを明示的にbuild-staging、build-productionでそれぞれ--modeをつけて分ける。, これだけだとビルドしたファイルが同じdistディレクトリに入ってしまい、間違えてステージングのファイルを本番にデプロイなんてことも起きそうなので分ける。, 書き出し先ディレクトリはvue.config.jsのoutputDirで行う。