Pm2

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2（プロセスマネージャー２）はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS（今回はNuxtJS）のアプリが365日常に起動されるように監視してくれます。 では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM２が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。 ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。 次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。 実際にサーバーにコードを上げてから同じコマンドを実行します。 リポジトリをクローン では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつもMobaXtermを使っています。 Nginxのファイルを作成 Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。 ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。 今回のデプロイはPM2というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。 それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。 順番でいうと。。。 では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。 listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例：sankou.com:84 server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。 proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。 ではNginxのテストをします。 OKがでれば問題なしです。 ファイヤーウォール もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。