react+next.js+pm2+nginxを使ってアプリをデプロイ

react+next.js+pm2+nginxを使ってアプリをデプロイ:

next.jsを使ってreactでSSR(サーバーサイドレンダリング)とSPA(シングルページアプリケーション)の環境を作っていきましょう。

また、作成したnextのアプリケーションに関しては本番環境へデプロイするまでの流れを記録として残しておきます。

今回使う環境

Nodeとnpmはそれぞれ最新の安定版(LTS)を使います

ローカル環境

• windows10
• Virtualbox
• Vagrant
• Ubuntu16.04

本番環境

• ubuntu16.04
• nginx
• pm2

Nodeとyarnのインストール

まだNodeとnpm、yarnをインストールしていない人はやっておきましょう。今回はnodeとnpmを最新の安定版(LTS)で入れていきます。

まずは通常のnodeとnpmをインストールしていきます。

sudo apt-get install -y nodejs npm 

次にnpmのキャッシュをクリアしてからnというモジュールをグローバル指定してインストールしていきます。最後のn stableコマンドでnodeとnpmの最新バージョンにアップデートできるようになります。

sudo npm cache clean 
sudo npm install n -g 
sudo n stable 

新しいnodeとnpmにシンボリックを張って下さい。

sudo ln -sf /usr/local/bin/node /usr/bin/node 
sudo ln -sf /usr/local/bin/npm /usr/bin/npm 

これで最新のLTSが使えるようになったかと思います。

以下のコマンドでバージョンを確認してインストール出来ているようであれば完了になります。

node -v 
npm -v 

続いてyarnをinstallしておいてください。バージョンを表示してインストールされているか確認してみましょう

npm install -g yarn 
yarn -v 

これで準備は完了になります。

ローカル環境でのnext.jsのサンプル作成

それでは早速next.jsのサンプルアプリを作ってみましょう

先に一点注意。Vagrantでフォルダのマウントをしている人はここから先、動かない可能性があるので注意しましょう。

対処法としてはrsync-autoでhostマシンのディレクトリと同期するのが望ましいです。

私の場合ここでめっちゃはまりました。

設定の仕方はこちらが参考になるのでご確認ください

https://qiita.com/daichi87gi/items/6b33349eedce28db430a

それでは最初にproject(next-test)上でreact 、react-dom、nextの3つのnodeモジュールをインストールします

mkdir next-test 
cd next-test 
yarn add react react-dom next 

これでインストール完了です。現状以下のようなフォルダ構成になっていますでしょうか？

next-test

├ node-modules

├ package.json

└ yarn.lock

そうしたらpackage.jsonの内容を以下のような形で書き換えてください。nameは好きなアプリ名を入れていただいて構いません。

next等のバージョンに関しては違うかもしれないので自分のものに合わせておいてください

もう一つscripts部分が違うはずなのでnextのscriptに書き換えておきましょう

{ 
  "name": "myapp", 
  "version": "1.0.0", 
  "main": "index.js", 
  "scripts": { 
    "dev": "next", 
    "build": "next build", 
    "start": "next start" 
  }, 
  "license": "MIT", 
  "dependencies": { 
    "next": "^7.0.2", 
    "react": "^16.6.0", 
    "react-dom": "^16.6.0" 
  } 
} 

それでは次にpagesフォルダとデフォルトののページとなるindex.jsを作成していきます。

next-test

├ node-modules

├ package.json

├ pages

│ └ index.js

└ yarn.lock

以下index.jsの内容になります

export default class Index extends React.Component { 
    render() { 
        return ( 
            <div> 
               <h1>Hello Next.js<h1> 
            </div> 
        ) 
    } 
} 

これでローカル環境の準備が整いました。

それでは以下のコマンドでnextjsの開発モードを起動してみましょう。

http://仮想環境のIPアドレス:3000にアクセスして「Hello Next.js」が表示されれば成功です

yarn run dev 

本番環境でpm2とnginxを使ってアプリのデプロイ

まずはローカル環境で作ったアプリをgithubやgitlabやらのリポジトリにアップしたり、直接サーバーに転送するなりしてプロジェクトを動かしたいサーバー上にcopyしてきてください。

また、本番環境でnode、npm、yarnのインストールがまだの方は同じ手順でインストールしておきましょう

本番環境でnode.jsのサービスを運用しようとするといくつか方法があるようです。今回はpm2といったnodeアプリを管理するモジュールを使っていきます。

pm2の導入

それではpm2をグローバル指定してインストールしていきましょう

npm install pm2 -g 

「success」が出ていれば完了です。

そうしたら事前に以下のコマンドを実行してnext.jsのアプリケーションをbuildしておきましょう

pm2でnextのstartコマンドを実行して永久的に起草させることができるようになりました。

http://IPアドレス:3000

で実際にアクセスして動作を確認してみましょう

yarn run build 
pm2 start npm --name "next" -- start 

nginxの導入

さてお疲れ様です。ラストにpm2で動かしているアプリをnginxを使って一つのアプリとしてport80で出力させていきたいと思います。

これで独自ドメインとの結び付けやnode以外のアプリケーションの管理もできるようになります

まずnginxをインストールしていない方はインストールしておきましょう

sudo apt-get install nginx 

インストールが完了したら以下のファイルを作成します。

/etc/nginx/conf.d/next-test.conf

server { 
  listen 80; 
  server_name test.sample.com; 
  location / { 
    proxy_pass http://localhost:3000; 
    proxy_pass_request_headers on; 
    proxy_redirect off; 
 
    proxy_set_header Host $http_host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  } 
 
  access_log /var/log/nginx/proxy_access_log; 
  error_log  /var/log/nginx/proxy_error_log; 
} 

今回はnginxの細かい説明は省きますが以上で独自ドメインやログの設定等をnginxで設定しました。以下のコマンドでnginxを起動してください。

systemctl restart nginx 

これでport80番の

http://sample.com

で表示されていれば成功になります。

まとめ

いかがでしたでしょうか？ここまででデプロイの流れは完了です。

後は各自好きなreact、nextのアプリを作ってJSを極めていきましょう。

今回作ったファイルい一式に関してはgithubの方にあげておきます。以下のurlで移動してダウンロードできるのでぜひ利用してみてください。

https://github.com/mikinovation/blog-react-sample/tree/1.0