はじめに
ふとしたことから素の CentOS 7.4 上に nginx 入れて Vue.js 動かしてみたくなったのでやってみた。
Vagrant ・ npm （全てローカル）はインストール済みである前提です。
目的とするもの
- Virtual Machine
- nginx
- Local Machine
- Vue.js
VM作成
基本的に途中までは こちら の記事を参考に進めていく。
Virtual Machine構築まで
LocalMachine
vagrant box add centos/7 https://atlas.hashicorp.com/centos/boxes/7
mkdir nginx
vagrant init centos/7
vagrant up
vagrant ssh
vagrant up できない場合は こちら を参照。主にWindows機の問題？
nginxインストール
リポジトリ追加
以下のファイルを新規作成。
基本的に sudo su でスーパーユーザーとして実行すること。
/etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
gpgcheck=0
enabled=1
インストール・起動
VirtualMachine
yum install nginx -y
# バージョンチェック
nginx -v
# 起動
nginx -v
もしマシン起動時にサービスを自動起動したいなら「サービス 自動化」とかで調べてね！
テスト環境に接続
http://192.168.33.10 に接続してWelcomeページに接続できるか確認する。
ちなみにこのIPはローカル側、 Vagrantfile から変更できる。
Vue側の準備
次にローカル側でVue.jsの環境を構築していきます。
本当はVM上に入れてもいいんですが、今回はローカルで。
vueのインストール
LocalMachine
npm i vue
npm i vue-cli
# プロジェクトの作成
vue init webpack vue-test
# テスト環境のビルド
cd vue-test
npm run dev
ここで試しに http://localhost:8080 にアクセスして以下の画面になることを確認する。
ビルド
問題なければビルドしてみる。
LocalMachine/vue-test
npm run build
ここで作成された dist をVMに持っていく。
持っていくためには、自分のストレージを共有してVM側からマウントする、設計図共有サイト（笑）からコードを持ってくる、とかとか。お好きにどうぞ。
デプロイ
ここでもう一度VM側に戻る。
nginx は初期設定の場合、受け口を /usr/share/nginx/html 内の index.html に持っている。
要はここを入れ替えればいいってわけ。
cd /usr/share/nginx/html
# 名前を変えて退避
mv index.html index.html.org
# マウント先からソースコードを配置する
cp -rf [mounted directory]/dist/* ./
アクセスしてみる
これでもう一度 http://192.168.33.10 にアクセスしてみると...。
終わりに
ね？簡単でしょ？