Vue.jsのアプリケーションをAWS上のNginxで公開する。(404エラーの罠)

Vue.jsのアプリケーションをAWS EC2上のNginxで公開する際に役立った情報の備忘録です。
Nginxのインストール等は省略します。

使用環境

Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type (無料使用枠)

Nginxの再起動コマンド

;再起動
sudo nginx -s reload

NginxのConfファイルの場所

;/etc/nginxフォルダへ移動
cd /etc/nginx

;nginx.confファイルを編集
sudo vi nginx.conf

Nginxのrootフォルダの場所

root(/usr/share/nginx/html)

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  localhost;
        root         /usr/share/nginx/html;

公開(RLoginを使用)

nginxが起動していれば、後はVue.jsでnpm buildしたdist直下のデータを、root(/usr/share/nginx/html)直下にコピーすればよい。

RLoginなどのツールを使ってAWSのEC2に接続し、SFTPファイルの転送を行うのがオススメ。
筆者も使ってみてRLoginはかなり使いやすいと感じた。

参考記事
Windowsターミナルソフト + Rlogin が最高すぎる！！

historyモードの罠

Vue.jsのhistoryモードには、ユーザが直接URLをたたくと404エラーが発生する罠がある。
nginx.confに一行追加すれば、問題なく解消する。

公式ドキュメントにもしっかり書かれている。
https://router.vuejs.org/ja/guide/essentials/history-mode.html#nginx

location / {
  try_files $uri $uri/ /index.html; ←追加
}