背景

お客さんの予算の関係で、LightSailへ2つのNuxtjsランタイムを起動させることに。まぁ安く済ませたいからだろうと思う。

LightSailを起動

SSRが要件だったので、一番安いプランだとCPUとメモリが圧迫されるかも・・・
とりあえず月々20$のプランで設定することに。
OSはもちろんNodejsがデフォルトで入っているOSを採用。

そしてSSH接続する。管理コンソールから直接ブラウザ画面でSSH接続できるから楽チンだよね。接続タブより、「SSHを使用して接続」をクリックするとCLIが起動する。


ログインしたら、CLI上で以降の手順で設定していく。

Nutxjsのセットアップ

nuxt2の方は、yarn start時に、ポートを3333にしておいてください。後ほどApacheから参照するようにします。

$ cd ~/
$ npm install -h yarn
$ git clone [https_url of nuxt1]
$ git clone [https_url of nuxt2]
$ cd nuxt1 && yarn && yarn build && cd ..
$ cd nuxt2 && yarn && yarn build

PM2のセットアップ

$ cd ~/
$ npm install pm2 -g
$ vi pm2.config.js
module.exports = {
  apps : [
  {
    name: "nuxt1",
    script: "yarn start",
    cwd : '/home/bitnami/nuxt1'
  },
  {
    name: "nuxt2",
    script: "yarn start",
    cwd : '/home/bitnami/nuxt2'
  }
  ]
}
$ pm2 start pm2.config.js
┌─────┬─────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name    │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼─────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ nuxt1    │ default     │ N/A     │ fork    │ 20691    │ 0s     │ 0    │ online    │ 0%       │ 26.3mb   │ bitnami  │ disabled │
└─────┴─────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
│ 1   │ nuxt2    │ default     │ N/A     │ fork    │ 20691    │ 0s     │ 0    │ online    │ 0%       │ 26.3mb   │ bitnami  │ disabled │
└─────┴─────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
$ sudo pm2 startup
$ sudo pm2 save

Apacheの設定

ServerNameでPM2で起動させたそれぞれへProxyするようにします。

$ cat /opt/bitnami/apache2/conf/httpd.conf
...
<VirtualHost *:80>
    ServerName nuxt1.example.com
    # ErrorLog /home/example/logs/error_log
    # CustomLog /home/example/logs/access_log common
    # <Proxy *>
    #     Require all denied
    #     Require ip xxx.xxx.xxx.xxx
    # </Proxy>
    # DocumentRoot /home/example/public_html
    ProxyPass /.well-known/ !
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>
<VirtualHost *:80>
    ServerName nuxt2.example.com
    # ErrorLog /home/example/logs/error_log
    # CustomLog /home/example/logs/access_log common
    # <Proxy *>
    #     Require all denied
    #     Require ip xxx.xxx.xxx.xxx
    # </Proxy>
    # DocumentRoot /home/example/public_html
    ProxyPass /.well-known/ !
    ProxyPass / http://localhost:3333/
    ProxyPassReverse / http://localhost:3333/
</VirtualHost>
$ apachectl restart 

HTTPで接続可能だけど...

SSL化したいよね。というときは、間にCloudFrontをかませて下さい。CloudFront→LightSailで飛ばせば、SSL接続することが可能です。

所感

実はLightSailの一番低いスペックで起動させたんだけど、CPU利用率とメモリが100%まで達してサーバがダウンしてしまいました。もし物理設計したくない要件であれば、サーバーレスがいいよね。

でも、サーバーレスで例えばLambdaでNuxtをSSRしようとすると、Lambda→API Gatewayで返却できるBodyサイズに制限があったり、そもそもLambdaに対してZIPをアップできないとかあったりする。UIフレームワークやAmplifyなどを採用したNuxtjsアプリだとLambdaでSSRは現実的ではない。そういうときは、本当はFargateとECSのコンビがいいのかなと。