The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

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

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

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

前提

・Macで実施しています(Windowsなどは方法が異なる場合があります)

経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使ったテンプレート)を公開するから読んでいただければと思います。

経緯

www.sky-limit-future.com

こちらが今回のことをやろうと思った経緯になります。

最悪な結果

先ほどの経緯のページでもご紹介していますが、Googlebotが正しく画面を認識していませんでした。
実際に作成した画面はこちらで、正しく表示されています。

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

しかし、Googleはこのページを次のように見ていることがわかりました。

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

ほぼ何も表示されていません。。。
つまり、このページはGoogleから良いコンテンツと判断されることはないだろうと想像できます。
これは最悪ですね。いくら頑張って作っても、世の中に広まることはほぼないでしょう。

単一ファイルコンポーネント化で解決できる??

実はなぜこうなったのかははっきりしません。悪いところはあれ?これ?といった具合に、想定はできても、本当のところの理由ははっきりしません。
なので対策のしようもなく、どうしようかと考えました。
私の中では、こうなった原因として

・SSRしていない
・Vue.jsの書き方の問題

という想定がありましたが、とりあえず単一ファイルコンポーネント化することで解決できるか試してみようと考えました。

そこでさくらのVPS上に環境を整え、単一ファイルコンポーネントを使ったアプリケーション開発(サンプルアプリ)を実施し、その画面を「Fetch as Google」で確認したところ想定通りの画面が表示されました。

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

上記はテンプレートを編集することなく、サーバー環境にあげたものになります。

さくらのVPS上にvue-cliで作成した(単一ファイルコンポーネントを使った)アプリケーションを公開する方法

ここからが本題です。まずは開発環境を整えます。
やることがたくさんあります。

小目次

nodebrewの導入
Node.jsの導入
yarnの導入
vue-cliの導入
テンプレートの作成
サンプルプロジェクトの確認
ビルド


基本的にはこのターミナル上で行いますので、ご注意ください。
※ここはさくらのVPSにSSH接続した状態で行うのではなく、ローカル環境で実施してください。

nodebrewの導入

まずはnode.jsをインストールします。

◆ホームディレクトリに移動

$ cd ~/

◆nodebrewのインストール
nodebrewをインストールします。

$ curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

◆パスを通す
パスを通します。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

◆確認
nodebrewが正しくインストールされているか確認します。

$ nodebrew -v

バージョンNOは返ってくれば完了です。

Node.jsの導入

続いてNode.jsを導入します。

◆安定版の最新をnodebrewでインストール

$ nodebrew install-binary stable

◆使用するバージョンの指定

$ nodebrew use stable

◆確認

$ node -v

こちらもバージョンNOは返ってくれば完了です。

yarnの導入

yarnを導入します。

$ npm install -g yarn
vue-cliの導入

vue-cliを導入します。

$ npm install -g vue-cli

これで環境は整いました。あとはサンプルコードを入れて表示されるか確認するだけです。

テンプレートの作成

vue-cliを使って、サンプルプロジェクトを作成します。
例えば、file:///Users/{{ユーザー名}}/projects/vue/ 直下にサンプルプロジェクトをクローンするとして進めます。

◆file:///Users/{{ユーザー名}}/projects/vue/に移動

$ cd ~/projects/vue/

◆プロジェクトの作成
ここでは「skylimit」という名前にしたいと思います。
先ほど移動した /projects/vue直下で以下のコマンドをたたきます。

$ vue init webpack skylimit

作成時に色々と質問されますが、そこは割愛します。
これでサンプルプロジェクトが出来上がったので、実際の画面を確認します。
ブラウザでfile:///Users/{{ユーザー名}}/projects/vue/skylimit にアクセスしてもこの時点では何も表示されません。

理由はあとで説明します。

サンプルプロジェクトの確認

◆作成したサンプルプロジェクトに移動
ご自分の作成したプロジェクトに移動しましょう。ここではskylimitに移動します。

$ cd skylimit

◆必要なものを入れる
npm installで必要なものを取得しましょう。

$ npm install

◆開発環境で画面確認
開発環境で画面の確認を行います。

$ npm run dev

デフォルト設定の場合、

http://localhost:8080

にアクセスすれば、次のような画面が出るはずです。

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

「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を使う方法なども検討していますが、とりあえずはこのまま進もうと思います。
疑問は残りつつも、最悪の結果は避けられそうです。。。