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

JavaScript
この記事は約10分で読めます。

 

みなさんこんにちは!

 

イザナギです!

 

最近ポートフォリオサイトを作り直して「Heroku」にあげようと思ったのですが、ビルド制限かかってしまったんですよね…

 

なので、WebサイトはHerokuに上げられませんでした。

 

どうしようかな?

 

 

そう迷った結果…

 

URL取得してサーバー借りてデプロイしよう!

 

という結論に至りました。

 

なので、今回はNuxtで開発したWebアプリをWebに公開までにしたことについて書いていきたいと思います!

サーバーの契約

 

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

 

気になる方は下記広告から!

 

   

初めて契約される方は、ログインが必要です。

 

ログインし、VPSを契約します。

 

私は「CentOS Stream」を使ってみたかったので、「CentOS Stream」を選択しました。

 

他の設定は好みでいいと思います!

 

これで契約は終わりですが、まだ設定する項目があるのでまだconoHa管理画面は閉じない方がいいです。

 

URLを取得

 

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

 

まあ、「Who is 代行」はつけた方が安心なので、ドメインは「.com」を選択しました。

 

ドメイン取得始めてな方は、お名前.comにユーザー登録してから取得してください。

 

SSL証明はお金がかかるので、やめました。

 

それに、Let’s Encryptを使えば無料でできるらしいです!

 

 

conoHaVPSにドメイン名を登録

 

先ほど取得したドメイン名「例:aaa.com」をconoHaに登録するため、conoHa管理画面の「DNS」という項目をクリックします。

 

 

クリックしたら右の方に、「+ ドメイン」というボタンがありますのでクリックし、先ほど取得したドメイン名を入力します。

 

そうすると、ドメイン一覧に追加せれていると思います。

 

そうしたら、鉛筆マークを押して、下の「+」ボタンを押します。

 

そして、新規で設定項目が出てきますので、以下のように設定します。

 

  1. タイプ:A
  2. 名称:空欄(何も入れない)
  3. TTL:空欄(何も入れない)
  4. 値:VPSのIPアドレス

 

そしたら、conoHaでの設定は終了です!

 

あとは、先ほどの項目の中にあった「タイプ:NS」の覧の値を全てメモしておきます。

 

お名前.comのネームサーバーで設定します。

 

お名前.comのネームサーバー設定

お名前.comの上記タブの「ドメイン」→「ドメイン機能一覧」→「ネームサーバー変更」

の順に選択していきます。

 

そうしたら、下の「ネームサーバーの選択」でその他を選択します。

 

そうしたら、下の方に「その他のネームサーバーを使う」という覧があると思います。

 

 

各ネームサーバーに先ほど、conoHaのDNSの項目で取得した値を入れていき、確認ボタンを押して保存します。

 

これで、お名前.comでの設定は終わりです。

 

VPSでNuxt環境を整える

  

 

この公式サイトなどを参考にしてsshログインしましょう!

 

まず、ログインできたら以下を実行し環境を整える

 

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

 

あとはgit cloneやローカルからscpコマンドを使ったりして、Webアプリのプログラムをサーバーに上げます。

 

Webサーバーを導入

Webサーバーといっても、nginxやApacheなどさまざまですよね。

 

どれがいいのかな?

 

シェア率で比較

 

 

こちらのデータを見てみると、nginxがApacheのシェア率を上回っているみたいです。

 

nginxがシェア率33.3%、Apacheが26.4%らしいです。

 

このデータから見ると、今主流なのは「nginx」なのかな?

 

トレンドで比較

 

Googleトレンド

 

次にGoogleトレンドで調べてみました。

 

調べてみるとApacheの方が検索されているみたいですね。 

 

性能面で比較

 

 

こちらの記事を見てみると、nginxの方が処理速度が速く、動作が軽いみたいです。

 

 

色々見てきた感じ、nginxの方がこれから伸びてきそうなので、nginxを使っていきます!

 

nginxを導入

 

それではnginxを導入していきましょう!

 

まずはsshでVPSにログインします。

 

ログインしたら、rootユーザーに切り替えて以下のコマンドを実行します。

 

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

 

インストールが完了したら、「/etc/nginx/conf.d/default.conf」というファイルができていると思います。

 

そのファイルをviなどを用いて、以下のように編集します。

 

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";
 }

 

「先ほど取得したドメイン名」は個人で違うので、お名前.comなどで取得したドメイン名に設定してください。

 

ちなみに「listen 80」がhttpで「listen 443 ssl」はhttpsの設定です。

 

このファイルでは、httpでアクセスされたらhttpsをリターンする設定にしています。

 

事項で説明する「ssl証明(Let’s Encrypt)」を使い、httpsを使えるようにします。

 

ssl証明(Let’s Encrypt)

 

Let’s Encryptを使えば、無料で電子証明を発行できます!

しかし、faviconが表示されないなどのエラーが発生するみたいです。

 

Let’s Encryptを利用するには以下のコマンドを実行して「certbot」をインストールします。

 

# 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 

 

「certbot certonly」を実行するとさまざまな質問(ドメイン名やメールアドレスなど)をされますので、答えていきます。

 

これで設定完了です!

 

Nuxtでアプリを作成する

 

ここでNuxtでアプリを作成します。

 

作成はローカルで作成し、scpコマンドでサーバーに上げるもよし!

VPS内で作成するもよし!

 

好きな方法で作成しましょう!

 

ちなみに私は、ローカルで作成した物をgithubにあげて、VPSにsshログインしgit cloneしています。

 

サーバーへのアップロードし、ビルドが終わったら、yarn run startなどをして起動しておきましょう!

 

起動するときのポート番号は好きな物を選んで構いませんが、「/etc/nginx/conf.d/default.conf」のlocationの部分を変えたポート番号にしないと表示されませんので注意!

  

nginxを起動する

 

以下のコマンドで、nginxを起動します。

 

sudo systemctl start nginx 
sudo systemctl enable nginx

 

ここまで終わると、ブラウザでhttps://「ドメイン名」で検索するとNuxtアプリが表示されていると思います。

Nuxtアプリをデーモン化

 

もしNuxtアプリをデーモン化したい場合は「forever」を使うといいと思います。

 

npm install -g forever

 

簡単に使い方は以下の通りです。

 

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

 

まとめ

 

今回はNuxtアプリをVPSに上げて、Webに公開までを行ってみました!

 

certbotがインストールできなかったり、nginxの設定の仕方が分からなかったりしてめっちゃ躓いてましたが、なんとかWebに公開することができました。

 

でも、https化したら、faviconが表示されなくなったので、その部分は次回にでも解決していきたいと思います。

 

それでは今回はここで筆を置かせていただきます。

 

最後まで記事をご覧いただき、ありがとうございました!

コメント

タイトルとURLをコピーしました