準備するもの
・Ubuntuサーバー（今回はバージョン20）
・root権限
知っておきたいこと
・SSHの簡単な操作
・Liniuxの簡単なコマンド
・VueJSの基本知識
サーバーの準備
今回はVPS (Virtual Private Server)を使います。Linodeというアメリカのフィラデルフィアにある会社のレンタルサーバーを毎月5ドル～で借りられます。
サーバー自体は東京で設定できるのでそれも良い点だと思います。
LinodeはAWSに比べて安く、しかもサービスも良いので良い会社として有名です。
では早速、linodeのページを見てみます。
また、他のレンタルサーバーや自宅サーバーでもUbuntuの準備ができたらほとんど手順は同じです。
Linode（サーバー）を作成します。
個人的にはOSはFedoraが好きですがUbuntuで行きます。
場所は東京にしましょう。
今回はRAM2GBでやってみます。しょぼいけど、パフォーマンスがどうなるか見てみます。
で、このlinodeの中のサーバー名とrootのパスワードを設定します。
SSHキーも必要なら生成して入れてあげましょう。
でCreate Linodeボタンを作成してサーバーを作成します。（お金がかかります）
サーバーにSSHで接続
でサーバーができたらSSHで接続します。今期はお気に入りのmobaXtermを使います。
IPアドレスがあるので、それとさっき作成したrootのパスワードを使います。
WindowsならmobaXtermの代わりにPuTTYでもOKですね。
サーバーに入れましたね。
Ubuntuのユーザーを作成
Rootだとすべてのファイルにアクセスでき、セキュリティ上安全ではないので新しくユーザーを作成します。
adduser dan
ユーザーができましたね。
では rootから新しく作成したユーザーのdanに切り替えます。
su - dan
ユーザーにrootと同じ権限を与える
では下記のコマンドから新しく作成したユーザーにrootと同じ権限を与えます。
一旦rootに戻ります。
su - visudo
でコンフィグファイルが開くので下のrootと同じように新しく作成したユーザーにも権限を与えます。
root ALL=(ALL:ALL) ALL dan ALL=(ALL:ALL) ALL #追加
wwwフォルダにアクセス権を与える
今回使用するnginxがこれからアップロードするvueのファイルにアクセスできるようにします。
これからwww-dataグループのwww-dataユーザーに読み込みする権利を与えます。
今回はvar/wwwkaravueファイルをデプロイすると仮定して進めます。
cd var mkdir www
sudo chown -R www-data:www-data /var/www sudo chmod -R g+rwX /var/www
では、下記のコマンドで新しく作成したubuntuのユーザーをwww-dataグループに追加します。
sudo adduser dan www-data
ここまでできたらrootから新しく作成したuserの方にスイッチしておきましょう。
su - dan
NPMをインストール
yarnを使いたい人はyarnでも同じようにできますのでいつも使っている方をどうぞ。
※このやり方だと現時点でバージョン12の古いNodeがインストールされるので後で別のインストールの仕方を説明します。
sudo apt update sudo apt install nodejs npm
できたらバージョンを確認しましょう。
node --version
【最新のNodeJSをインストールする方法】
sudo apt update -y cd ~ curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt install nodejs node --version
バージョン16がインストールできました。
Nginxのインストールと設定
主流のウェブサーバーとしてapache（ワードプレスで使っている）もありますが、個人的にお勧めのnginxを使っていきます。
インストールはこれで。
sudo apt install nginx
Nginxのディレクトリに移動
cd /etc/nginx
ここにsites-availableとsites-enabledの２つのディレクトリがありますね。
使い方としては、sites-enabledにウェブサイトのファイルを準備し、それとsites-availableから読み込むようにします。
Windowsではショートカットに近いもの（同じではありませんが感覚として）ですが、シンボリックリンクという方法でファイルをコピーします。
まずは、sites-available内にvue_projectというファイルを作成します。
sudo touch /etc/nginx/sites-available/vue_project
sudo ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/vue_project
ではvue_projectのファイルにnginxのコンフィグを書いていきます。
sudo nano sites-available/vue_project
実際のファイル（例）
server {
listen 80;
server_name 139.162.84.105;
charset utf-8;
root /var/www/html/Vue/dist;
index index.html index.htm;
location = /favicon.ico { access_log off; log_not_found off; }
location / {
root /var/www/html/Vue/dist;
try_files $uri /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
nginxにvar/www/html/Vue/distのディレクトリを見るように指示しています。
では下記のコマンドでnginxをテストします。
sudo nginx -t
イェイ！
ではnginxをリスタートしてみます。
sudo service nginx restart
Nginxが参照するディレクトリを作成
では先ほどのコンフィグで設定したdistファイルがないので設定していきます。
デプロイの際に vue のbuildコマンドでdistディレクトリが自動で作成されますが、まずはnginxのテストでダミーファイルを作成します。
cd var/www/html mkdir Vue cd Vue mkdir dist nano index.html
で、適当に<h1>Hi</hi>とか入れてセーブします。
で、ブラウザからサーバーのIPアドレスかドメインにいくと。。。
やったー！
Nginxサーバーが問題なく動いていることを確認できました。
ではテスト用で使ったdistディレクトリは削除しておきます。
rm -rf dist/
Gitを使ってvueアプリをサーバーにプッシュ
では、distディレクトリからindex.htmlがサーブされていることを確認できたので、本番のVueアプリをアップロードしていきます。
ここで、gitを使ったことがない人は、FＴＰでサーバーに接続してマニュアルでアップロードする方法もあります。
しかし、今後のファイル更新の事を考えると、gitを使って、バージョンをコントロールしていく方がより効率的です。
このやり方は他の記事でも説明しているので、それも見てみてください。
今回はコマンドだけ記載しておきます。
Gitのインストールとコンフィグ
sudo apt install git-all git init --bare github-hook.git cd github-hook.git/ cd hooks nano post-receive
git --work-tree=/var/www/html/Vue/ --git-dir=/var/www/html/Vue/github-hook.git/ checkout -f
Vueアプリのある環境からpush
ではローカルのPCからVueアプリをサーバーにpushします。
git remote add live ssh://root@139.162.84.105:/var/www/html/Vue/github-hook.git
git push live master
ファイルが上がったことが確認できました。
Vueアプリのbuild
では、Vueアプリがアップロードされたらデプロイ用にアプリをプロダクション用にコンパイルしていきます。
npm install
#デペンデンスィーのインストール（ライブラリとか）
npm run build
#distディレクトリの作成
ここでエラーがなければOKですね。
【おまけ】
さっきのpost-receiveファイルに下記のコマンドを追加してgitでpushした後に自動でnpm run buildのコマンドが実行されるようにしましょう。
これでいちいちdistのファイルを更新しなくてすみますね。
cd /var/www/html/Vue npm install npm run build
実際にデプロイしたVueアプリ
下記のIPアドレスから実際にデプロイしたVueのアプリにアクセスができます。
良かったら見てみてください。