【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】

「npm run dev」では何をやっているかと言うと、webpackでコンパイルしたものを、模擬的に「http://localhost:8080」で確認できるようにしています。裏を返すと、webpackでコンパイルされていないもの、つまり「file:///Users/{{ユーザー名}}/projects/vue/skylimit」にアクセスしても、何も表示されません。

これを解決する方法がビルドです。

ビルド

ビルドを行う前の準備です。
◆config/index.jsの編集
config/index.jsの中に以下の記載があります。

build: {
	// Template for index.html
	index: path.resolve(__dirname, '../dist/index.html'),

	// Paths
	assetsRoot: path.resolve(__dirname, '../dist'),
	// 修正箇所
	assetsSubDirectory: 'static',
	assetsPublicPath: '/',

この中の「assetsPublicPath」を修正します。
このままだとパスの指定がうまくいかないので、相対パスとして以下のようにします。

↓修正後

build: {
	// Template for index.html
	index: path.resolve(__dirname, '../dist/index.html'),

	// Paths
	assetsRoot: path.resolve(__dirname, '../dist'),
	// 修正箇所
	assetsSubDirectory: 'sourceacademy/static',
	assetsPublicPath: '',

assetsPublicPathを空にしました
ここは環境によって異なることがあるので、コンソールなどを確認して微調整してください。

◆ビルド
ビルドを実施します。

$ npm run build

◆dist配下のソースを移動
上記のビルドが完了すると、「dist」ディレクトリが作成されて、その配下に「index.htmlファイル」「staticディレクトリ」が配置されます。これをドキュメントルートに持っていくことで、本番環境でも動くようになります。

要するに開発するために作成した以下の階層構造がありますが、
f:id:duo-taro100:20180428223640p:plain

この中で、本番にリリースするものは一つもありません。私はここでハマりました。あくまで本番に必要なものを作成するためのものと言うことです。
例えば、ここで作成された「skylimit」を世の中に公開するために、作成したソースコード群をアップロードすると思いますが、アップロードするのは先ほどのビルドで作成された「dist」直下にある「index.html」と「statc」ディレクトリだけです。

以下のようにやると不具合が出るので絶対にやらないようにしてください。

1 : 作成したskylimit配下の全てをアップロード
2 : dist/index.htmlをskylimit直下に持っていき、index.htmlを上書き
3 : dist/staticディレクトリを、こちらもskylimit直下に持っていき、上書き

こうするとビルドするたびに、以前のビルドファイルを残してしまうことになります。

◆ビルド後の表示確認
ローカル環境で、確認ビルド後の画面を確認するには

file:///Users/{{ユーザー名}}/projects/vue/skylimit/dist

にアクセスしましょう。
ここで開発環境と同様の画面が表示されていれば完了です。うまく表示されていない場合はコンソールにエラーがないか確認してみてください。

結果

私が上記でビルドしてできたdist配下を本番にリリースしてみました。
再度「Fetch as Google」でbotがどのようにみているかを確認したところ、

f:id:duo-taro100:20180428223430p:plain

ほぼ変わらない状況に。。。
思い当たる箇所の実装を変えてみたところ、

f:id:duo-taro100:20180430140712p:plain

botがみている画面はうまく表示されました。

コンパイルしたら大丈夫？

一部のコンテンツ作成の部分をwebpack管理外に置いていましたが、それがダメだったみたいです。
webpackでコンパイルされない部分はうまく表示されないのかな、と思ったり。
でもそういった知識が乏しいため、はっきりとした答えはわかりません。。。

模索は続く

先ほどの画像をみていただくとわかりますが、「貴サイトへの訪問者にはこのページが以下のように表示されます。」と記載されている画面は真っ白になります。
実際に、作成した画面にアクセスすると正しく表示され、そんなことはないのですが、「Fetct as Google」上では、そのように判断されました。
ただし、これもまた知識不足とか、検索能力不足なのか、こうなったところでそのような悪影響があり、どのように対応していいかわかりません。。。
模索しながら良い方法を考えていきたいと思います。
知っている方がいらっしゃいましたら、コメントいただけると嬉しいです。

以上になりますが、Nuxt.jsを使う方法なども検討していますが、とりあえずはこのまま進もうと思います。
疑問は残りつつも、最悪の結果は避けられそうです。。。

Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】