Nginx + Nuxt + VPSでWebサイトを公開！

みなさんこんにちは！
イザナギです！
最近ポートフォリオサイトを作り直して「Heroku」にあげようと思ったのですが、
ビルド制限かかってしまったんですよね...
なので、WebサイトはHerokuに上げられませんでした。
NuxtアプリをHerokuでデプロイしてみた！
どうしようかな？
そう迷った結果...
URL取得してサーバー借りてデプロイしよう！という結論に至りました。
なので、今回はNuxtで開発したWebアプリをWebに公開までにしたことについて書いていきたいと思います！

サーバーの契約

今回はconoHaVPSを使いたいと思います。

初めて契約される方は、ログインが必要です。
ログインし、VPSを契約します。
私は「CentOS Stream」を使ってみたかったので、「CentOS Stream」を選択しました。
他の設定は好みでいいと思います！
これで契約は終わりですが、まだ設定する項目があるのでまだconoHa管理画面は閉じない方がいいです。

URLを取得

お名前.comやムームードメインなど、現在ではいろんなサイトから取得できますが、今回は「お名前.com」で取得します。

#パッケージ更新
yum update
#node.js　インストール
sudo yum install nodejs -ysudo npm update -g npm
# yarn 使う場合
sudo npm install -g yarn

# nginxをダウンロード
sudo yum -y install nginx

server {
         client_max_body_size 50M;
         listen  80;
         server_name     「先ほど取得したドメイン名」;
         return 301 https://$host$request_uri;
 }
 server {
            # 表示させたい場所（この場合はNuxtでポート3000を利用しているパターン）
            location / {
                 proxy_pass http://localhost:3000;
         }
            listen  443 ssl;
            server_name      「先ほど取得したドメイン名」;
            ssl on;
         ssl_certificate "/etc/letsencrypt/live/ 「先ほど取得したドメイン名」/fullchain.pem";
         ssl_certificate_key "/etc/letsencrypt/live/ 「先ほど取得したドメイン名」/privkey.pem";
 }

# CentOS Streamでssl証明(Let's Encrypt)を使うため
yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
yum -y install certbot
#電子証明発行
certbot certonly　

sudo systemctl start nginx 
sudo systemctl enable nginx

npm install -g forever

#yarn run startコマンドをデーモン化
forever start -c "yarn run start" ./
#foreverを実行中のプロセス確認
forever list
#foreverを止める「[番号]はforever　listで確認するuidの左隣の番号」
forever stop [番号]

＊最近デーモン化の方法を「forever」から「pm2」に変更しました。
PM2でのサーバー再起動時の自動設定が楽だった件（Nuxt）

まとめ

今回はNuxtアプリをVPSに上げて、Webに公開までを行ってみました！
certbotがインストールできなかったり、nginxの設定の仕方が分からなかったりしてめっちゃ躓いてましたが、なんとかWebに公開することができました。
でも、https化したら、faviconが表示されなくなったので、その部分は次回にでも解決していきたいと思います。
それでは今回はここで筆を置かせていただきます。
最後まで記事をご覧いただき、ありがとうございました！