今更だけど、Vue.jsを使ってローカル環境で開発し、ネット上にWebサーバー構築してサイト公開するまでの流れを一通りやってみました。
今のサイトでは静的なものから動的なものが増え、さらにUIがスマホのアプリのようにボタン一つ一つに動きがあったりページ遷移が滑らかになってたりします。
それらの構築に色々と役立っているJavaScriptフレームワークの中で、このVue.jsというのも多々あるフレームワークの一つ。
例えばそれを使って色々と動きがあるサイトを作ったとして、それをどうサーバーにアップしたら表示するのかというのが全く分かりませんｗ
ネットで色々と調べながら体験したんですが、これは何度か繰り返しながら覚えていかないと忘れそう。ひとまず自分のブログに記録しておきます。
主に自分用の記録なので、分かりそうなものは端折っていきますね。
1.node.jsインストール
Vue.jsのほかにReactやAngulerなど同じようなフレームワークは、Node.jsに付属する「npm」というものでインストールするため、Node.jsをインストールする必要があるんだそう。
これは公式サイトからWindowsにインストールするアプリがあるのでダウンロードして実行していくだけでした。
インストールアプリ終了後、パワーシェルなどコマンドツールを開き、ノードがインストールされたかコマンド入力して確認します。
node -v
これでバージョンが表示されれば成功です。併せてnpmもインストールされているか確認します。
npm -v
するとここで以下のようなエラーが発生しました。
vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\ユーザー名\AppData\Roaming\npm\vue.ps1 を読み
込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参
照してください。
発生場所 行:1 文字:1
+ vue run build
+ ~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
まあただではすんなりとインストールできるとは思ってませんからｗ
調べてみると実行ポリシーがないことが原因であると以下のサイトで原因と解消法を教えてくれてました。感謝！
そういうわけで解消するためのコマンド入力し、npmを再度インストールしてみました。
# 実行ポリシー解消
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
# npmインストール
npm install -g npm@latest
これでnpmのバージョン確認するコマンド入力し表示したら完了です。
2.Vueインストール
次はnpmを使ってVueをインストールします。
npm install -g @vue/cli
3.プロジェクト作成
任意の場所にVueプロジェクトを作成し、ブラウザで確認するまでの流れです。普段はXamppを使ってWebサイト構築するので、今回はXamppのドキュメントルート内にテスト用のディレクトリを作成してそこに作ってみました。
cd /Xamppまでのpath/htdocs/
vue create vue_test
cd vue_test
移動した場所で仮想サーバーを立ち上げます。
npm run serve
これでコマンドツール内でサーバー立ち上げているような文字列が表示し、以下のURLをブラウザに入力すると確認できるそうです。
http://localhost:8080
4.デプロイモジュールを作成
自分はこのローカル環境のファイル群をそのままサーバーにアップして公開するのかなと思ってたら全然違いました。
Webサーバーにアップしてサイト公開するためのファイル群をコマンドで作成し、できたものをアップするんですね。
確かにWebサーバーあるのに、アップして仮想サーバーのコマンド入力するとかおかしな話ですよね。
以下のコマンドでWebサーバーにアップするようのファイル群を出力します。
npm run build
すると、最初に用意した構築用のディレクトリ内に新たにdistというディレクトリが出来、その中にファイルが出力されていました。この中身をWebサーバーの公開ディレクトリにアップするそうです。
FTPでアップロードした後、ブラウザで確認します。
すると、画面が真っ白でした。
こういう時って今回だけでなく別にWebサイト構築してるときはいつもドキっとしちゃいますねｗ
調べてみると、どうやらhtmlファイル内でCSSやJSを読み込むためのパスを変更する必要があったんだそう。
デフォルトが/から始まるため、基準が違ってしまうことがあるため、buildする最初にvue.config.jsの方にパスを指定しておくと良いのだそう。
module.exports = {
publicPath: './'
}
これを追記した後にbuildしたファイルをアップロードし、ブラウザで確認すると画面が表示しました。
これでひとまずローカル環境でVue.jsで構築したものをWebサーバーにアップして表示するまでの流れができました。
もっと色々とインストールして開発環境を良くする必要がありそうな情報があったのですが、それは試してまた記録しようと思います。