はじめに
ローカル環境でいろいろ作ったものをいざデプロイするときにやらなきゃいけないこと。ローカル環境構築時よりも手間が多くなるので、最初はこれだけでも多少骨が折れますよね。。
今回はフロントエンドがReact、サーバーサイドがExpress。DBはMySQL。通常別途DBサーバーも契約しますが、今回は規模が小さいアプリなので一つのサーバーで行います。これらをVPSサーバー上に公開するときの手順を書いていきます。
※各作業自体は調べるとすぐにでてくるので、この記事では設定漏れ等の予防を兼ねて箇条書きでバーッと書いています。
VPSの準備(初期設定)
1.VPSサーバーの契約(おすすめはConoHa)
2.サーバーを追加(Ubuntu18.4にしました)
3.サーバーにrootユーザーでSSHし、SUDO権限を持つ一般ユーザーを追加
4.一般ユーザーを鍵認証でログインできるように設定
5.rootでのログインを禁止する
6.一般ユーザーで鍵認証でSSHできることを確認する
VPSの準備(アプリケーションの準備)
1.一般ユーザーでSSHし、node・mysql・nginxをapt経由でインストール
2.開発環境で作ったReactアプリとExpressアプリをVPS上にコピーする。
3.Reactプロジェクトは「npm run build」で吐き出されたファイル群を使う
4.各プロジェクトを任意の場所に配置する
（例として、Reactは/var/www/html/frontに、Expressは/opt/apiに配置しました）。
ドメインの準備
1.ドメインを取得します
2.VPSの管理画面等からネームサーバーの情報を確認し、ドメインサイト側に設定します。(反映されるには数十分～数時間必要)
2.うまく設定ができてない場合の問題切り分けを簡単にするために、上記設定して時間を置いたのち、VPSにSSHしてnginxをデフォルト設定のまま起動してみます。
3.IPアドレス直打ちと、取得したドメインでのアクセスをブラウザから行ってみます。どちらもnginxの画面が返ってくればOK。
MySQLの準備
1.再びVPSにSSHして、MySQLでユーザーの作成、データベースの作成を行います。
2.今回はアプリケーションが同一ホストに存在するので、MySQLの接続権限をlocalhostのみ許容するように設定します。管理用に別IPからのアクセスを許可する場合は都度追加する
3.Expressアプリを「npm start」で立ち上げてみて、ログ等で無事にMySQLと接続できていることを確認する
nginxの設定
1.今の状態だとReactアプリケーションは表示できるが、APIへの接続ができないはずです。そのため、ドメインサイト側でサブドメインを設定し、先ほどと同じくネームサーバーの設定をします。
2.ドメインでのアクセス＝Reactアプリ。サブドメインでのアクセス=APIと振り分けを行うため、nginxでマルチホストの設定をします。
3.さらに、Expressサーバーはリバースプロキシの設定をします。
3.「/etc/nginx/conf.d/default.conf」を以下のように書き換えます
server {
listen 80;
server_name domain.com(取得したドメイン);
location / {
root /var/www/html/build;
index index.html;
try_files $uri /index.html;
}
}
server {
listen 80;
server_name api.domain.com(取得したサブドメイン);
location / {
proxy_pass http://localhost:3000;
}
}Expressを3000ポートで立ち上げている場合。
サブドメインでのアクセス時はlocalhostの3000番に振り分けられます。
Reactの場合SPAでの構築のため、try_files ～でルーティングが見つからなく404になるのを解決してます。(ファイルがない場合は常にindexを返す)
Let’s EncryptでSSL化
1.httpsでのアクセスができるようにこちらも行います
( https://weblion303.net/1790/ )
デプロイ
1.nginxを再起動
2.Expressを起動
3.httpsドメイン名でブラウザからアクセスできることを確認
4.おつかれさまでした
最後に
こうやって書いてみるとやること多いなぁと思いました。。
多分、初めてやるときはかなりハマりながら。
２回目にやるときは思い出しながら。
3回目にやるときでようやくスムーズにできそうかなっていう所感。
今はもっと簡単にデプロイできるサービスが多く存在しますが、VPSにOSだけ入った状態からいろいろやってみると、何がどうなっているという理解が深まるので、一度はやってみることをお勧めします。
