/api-staging → ステージングバックエンド, というように振り分けるようにして、APIではどちらのパスも同じ処理へルーティングして同じコンテナでどちらでも動くようにした。 ここは環境によって異なることがあるので、コンソールなどを確認して微調整してください。, ◆dist配下のソースを移動 疑問は残りつつも、最悪の結果は避けられそうです。。。, duo-taro100さんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog 実際に作成した画面はこちらで、正しく表示されています。, ほぼ何も表示されていません。。。 まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。 $ npm install -g vue-cli $ vue - … 実際に、作成した画面にアクセスすると正しく表示され、そんなことはないのですが、「Fetct as Google」上では、そのように判断されました。 ・サンプルプロジェクトの確認 先ほど移動した /projects/vue直下で以下のコマンドをたたきます。, 作成時に色々と質問されますが、そこは割愛します。 ・テンプレートの作成 config/index.jsの中に以下の記載があります。, この中の「assetsPublicPath」を修正します。 知っている方がいらっしゃいましたら、コメントいただけると嬉しいです。, 以上になりますが、Nuxt.jsを使う方法なども検討していますが、とりあえずはこのまま進もうと思います。 ・yarnの導入 ・ビルド, 基本的にはこのターミナル上で行いますので、ご注意ください。 またドメインを分けるとSSL証明書とかの手間も増えるのでドメインも同じにしたい。, 今回はHTTPSロードバランサーの設定でアクセスしてきたパスでバックエンドを分けた。, /api → 本番用バックエンド webpackでコンパイルされない部分はうまく表示されないのかな、と思ったり。 ※ここはさくらのVPSにSSH接続した状態で行うのではなく、ローカル環境で実施してください。, これで環境は整いました。あとはサンプルコードを入れて表示されるか確認するだけです。, vue-cliを使って、サンプルプロジェクトを作成します。 vue-cliの環境構築. あんまりきれいじゃない。 ここでは「skylimit」という名前にしたいと思います。 ◆config/index.jsの編集 ◆模索は続く, 先ほどの経緯のページでもご紹介していますが、Googlebotが正しく画面を認識していませんでした。 ブラウザでfile:///Users/{{ユーザー名}}/projects/vue/skylimit にアクセスしてもこの時点では何も表示されません。, ◆作成したサンプルプロジェクトに移動 実際に描画されるファイル(ビルド対象のファイル)はsrcディレクトリに格納されています。 さらにnpm run buildを行うと、distディレクトリが生成されます。 ビルド後アプリケーションを公開した時、実際に表示されるファイル(bundleファイル)が格納されています。 ただし、ビルド後に以下のメッセージが表示されます。 HTTP serverで公開されることを前提としているため、file://でindex.htmlにアクセスしても表示確認ができないようです。 なので対策のしようもなく、どうしようかと考えました。 つまり、このページはGoogleから良いコンテンツと判断されることはないだろうと想像できます。 ◆最悪の結果 【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】 前提 ・Macで実施しています(Windowsなどは方法が異なる場合があります)経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使ったテンプレート)を… vue-cliやLaravelを利用してvueを利用する場合は、vueを利用するための設定が完了しているのでwebpack等の知識がなくても開発を進めることができます。今回はwebpack、vue.jsを手動でインストールし、シングルファイルコンポーネントを使った簡単なアプリケーションを作成します。 私の中では、こうなった原因として, という想定がありましたが、とりあえず単一ファイルコンポーネント化することで解決できるか試してみようと考えました。, そこでさくらのVPS上に環境を整え、単一ファイルコンポーネントを使ったアプリケーション開発(サンプルアプリ)を実施し、その画面を「Fetch as Google」で確認したところ想定通りの画面が表示されました。, ・nodebrewの導入 | ◆結果 ご自分の作成したプロジェクトに移動しましょう。ここではskylimitに移動します。, 「npm run dev」では何をやっているかと言うと、webpackでコンパイルしたものを、模擬的に「http://localhost:8080」で確認できるようにしています。裏を返すと、webpackでコンパイルされていないもの、つまり「file:///Users/{{ユーザー名}}/projects/vue/skylimit」にアクセスしても、何も表示されません。, ビルドを行う前の準備です。 現行バージョンでは、vue-cliで以下のように叩くことでコマンド一つで導入が可能となっております。 terminal $ vue init potato4d/vue-dev-template 基本的な開発環境 アプリケーション基盤 Vue.js. Vue側は環境変数で切り分ける。, 許可ドメインの設定はFirebaseや、GoogleのAPIキー、Cloud StorageとかDjangoとか使ってるサービスごとにやるので何気にめんどう。 LTSと記載されている方(推奨版)をお勧めする。 Node.js. 再度「Fetch as Google」でbotがどのようにみているかを確認したところ、, 一部のコンテンツ作成の部分をwebpack管理外に置いていましたが、それがダメだったみたいです。 もちろん事前に本番用、ステージング用でプロジェクトを作っておく。, firebae.jsonに書くpublicはdeploy時、-pオプションで上書きできるのでこれで分ける。, これを実行中の開発用Dockerコンテナでexecするためシェルスクリプト化した。, GCPのHTTPSロードバランサーは最低2000円/月ぐらいしてしまうので、分けるのは避けたい。 ◆さくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使った)アプリケーションを公開する方法 ブログを報告する, 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ドライブに書き出す. distディレクトリは間違わないよう消しておいた, 次にFirebase Hostingでデプロイ先プロジェクトを分ける設定。 ただし、これもまた知識不足とか、検索能力不足なのか、こうなったところでそのような悪影響があり、どのように対応していいかわかりません。。。 このままだとパスの指定がうまくいかないので、相対パスとして以下のようにします。, assetsPublicPathを空にしました 例えば、file:///Users/{{ユーザー名}}/projects/vue/ 直下にサンプルプロジェクトをクローンするとして進めます。, ◆file:///Users/{{ユーザー名}}/projects/vue/に移動, ◆プロジェクトの作成 上記で書いた環境変数を使ってディレクトリを変える関数を作って切り替えた。, この設定でステージングはdist-stagingディレクトリに、 目次 概要 検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.… | これでサンプルプロジェクトが出来上がったので、実際の画面を確認します。 ◆単一ファイルコンポーネント化で解決できる?? 模索しながら良い方法を考えていきたいと思います。 これは最悪ですね。いくら頑張って作っても、世の中に広まることはほぼないでしょう。, 実はなぜこうなったのかははっきりしません。悪いところはあれ?これ?といった具合に、想定はできても、本当のところの理由ははっきりしません。 本番はdist-productionに書き出されるようになった。 ここで開発環境と同様の画面が表示されていれば完了です。うまく表示されていない場合はコンソールにエラーがないか確認してみてください。, 私が上記でビルドしてできたdist配下を本番にリリースしてみました。 yagish履歴書は、システム1人、デザイン1人、イラスト1人、計3人の小さなチームで作っていて、開発は非常に身軽なので、本番公開時もローカルの開発環境+Firebase本番環境だけだった。, でもさすがに大きな変更を本番でやるのは怖いので、手間と費用をなるべく抑えつつ、Firebaseを使ったステージング環境を構築することにした。, ステージング環境について公式ドキュメントに書いてあるので、参考にする。 .env.staging, 開発環境はDockerコンテナで行っているが、これを本番、ステージングなどで分けてしまうと面倒くささが圧倒的に増すのでやりたくない。 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プロジェクト作成とビルド方向まとめ」. 経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使ったテンプレート)を公開するから読んでいただければと思います。, ◆経緯 開発サーバーの実行、ステージング用ビルド、本番用ビルドもすべて一つのコンテナで行う。, まず、buildコマンドを明示的にbuild-staging、build-productionでそれぞれ--modeをつけて分ける。, これだけだとビルドしたファイルが同じdistディレクトリに入ってしまい、間違えてステージングのファイルを本番にデプロイなんてことも起きそうなので分ける。, 書き出し先ディレクトリはvue.config.jsのoutputDirで行う。

Arms 三 協 Cad 5, テニス Big4 なんj 34, ケーキ 3号 何人分 7, 片思い 彼の本音 占い 6, I Go To School 文型 4, Dahon K3 ハンドル交換 14, アンタッチャブル柴田 実家 お 金持ち 10, ヒロミ リフォーム タッキー 4, Vb Net カタカナ 小文字 大文字 変換 5, 星野源 歌詞 私 5, ゴルフトゥーラン Tsi 故障 5, Cca C16 Eイヤホン 27, ジャニーズ タバコ News 59, 再婚 結婚式 ドレス 5, ポケモン 第四世代 伝説 4, はたけ カカシ夢小説 裏 10, Stracker's Full Loader 4, アオダイショウ マムシ 食べる 4, ハーレー 維持 できない 8, 旅猿 トルコ Hulu 4, Worst外伝 グリコ Rar 36, ひかりtv ダビング できない 7, フラッシュ 建具 反り 7, Cf Lx3 Cpu交換 8, Jaico キャリアコンサルタント 評判 4, 幸村精市 夢小説 結婚 39, ビームス マフラー 音量 4, 胃腸 ツボ 耳 5, 多 嚢胞 性卵巣症候群 横浜 5, Wow That's Great 意味 6, Aquos R5g 不具合 4, 妊娠 木村さん ガーネット 38, Ps4 ツイッター ハッシュタグ 5, Kbs 歌謡大祭典 2018 出演者 25, アナ雪 ドレス H&m 5, 明石家さんま 自宅 目黒 23, ウイコレ パーフェクト セーバー 10, Pubgモバイル エース称号 条件 5, ポケモンgo サークル固定 2回 8, マイライフ 守備 ひどい 10, りんご トキ 苗木 5, 後輩 脈あり 男 10, 工事 報告書 書き方 6, 犬 17歳 長生き 9, 嵐 Mステ 動画 2019 18, ドラクエ ウォーク Android10 8, Lenovo G500 無線lanカード交換 4, キルスティン ダンスト 死亡 18, Iphone Se ケース 8と同じ 4, 冷凍庫 霜取り 電源切らない 4, Stars 大学 2ch 8, 弓道 女子 性格 59, セコム 鍵 開けてもらう 料金 16, 嫌 われる カルマ 4, 東芝 冷蔵庫 エラーコード H71 6, ユニクロモデル 男性 外国人 20, みらい くる 岡山 4, 原油etf コンタンゴ いつ 4, 中国 服サイズ表記 子供 4,