Nuxtデプロイメモ(Conoha VPS)

# Nuxt を Conoha VPS にデプロイする手順
まずは契約してからコンソールでipとかパスワードを確認して、sshで入れるようにしましょう。安くていいですよね。めんどいのでrootで入って操作します。

### ①Gitをインストールする
いくらでも書いてあるので、それを見てやればいい。
https://qiita.com/tomy0610/items/66e292f80aa1adc1161d

予め用意したNuxtのファイルたちを適当な場所にgitで入れる。

### ②yarnをインストール
まずリポジトリをインストール
```yum install epel-release```
nodeをインストール
```yum module install nodejs```

https://www.softel.co.jp/blogs/tech/archives/6490 等を見ながらnを使ってversionをあげる
```npm install -g n```
```n stable```
```yum remove nodejs npm```
```exec $SHELL -l```

Yarn リポジトリを有効化
```curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo```
GPGキーを追加
```rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg```
yarn をインストール
```yum install yarn```

### ③pm2を入れる
```npm install pm2 -g```
とか```yarn add ```で入れればいいと思います。

### ④とりあえずApacheでページを表示してみる
```yum install -y httpd```
で Apache を入れる。
```service httpd start```
とかで動かす。
```systemctl enable httpd```
しておく。
次にhttpを弾くかないようにする
```firewall-cmd --zone=public --add-port=80/tcp --permanent```
設定をリロードする
```firewall-cmd --reload```

そしたらこんな感じで(IPアドレスを指定して)ブラウザから見にいけば、テストページが見に行けるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602951/de24cdb2-5404-c870-df1e-b90194ee590a.png)

SSLにするときはまた設定する。

### ⑤Nuxtで作ったものを見れるようにする
何をするかというと、localhost:3000にリダイレクトするという設定を httpd.conf のファイルに設定していきます。pm2でデーモンで起動するようにします。

まず```yarn install```でモジュールをインストールしておきましょう。
envファイルを用意している場合、ちゃんと本番用に作っておきましょう
(```cp .env.example .env```的な)
そして```yarn build```して、```yarn start```で動かせることを確認しましょう。

次に、Apacheの設定をします。一部だけ掲載します。

```apache
# at /etc/httpd/conf/httpd.conf 
NameVirtualHost *:80

<VirtualHost *:80>
    DocumentRoot /var/www/html
    <Proxy *>
        Require all granted
    </Proxy>

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>
```
```service httpd reload```でリロードします。
この時点では以下のようになるでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602951/d8bbe0d6-ad40-bba3-89e9-4cf83f558490.png)

```less /var/log/httpd/error_log```とかでapacheのエラーログを見てみると以下のようになりました。

```
[Sun Aug 01 17:12:43.321483 2021] [proxy_http:error] [pid 88620:tid 140661588195072] [client クライアントのIPアドレス] AH01114: HTTP: failed to make connection to backend: localhost, referer: http://IPアドレス
```
まぁlocalhost:3000まだ起動してないからね!!

次にpm2で Nuxt のアプリを起動しましょう。
まずgit cloneしたディレクトリをカレントディレクトリにします。
そんで```pm2 start "yarn start" --name アプリの名前```にすればokです。

ブラウザから見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602951/5b22aea4-7639-dc35-ee9c-07c725d0cf25.png)

わーい！

次に、サーバ起動時にpm2も起動するようにしましょう。pm2を先程のまま起動している状態で、
```pm2 startup```してから```pm2 save```しましょう。
```pm2 save```してから```cat /root/.pm2/dump.pm2```してみると、ちゃんと今起動しているアプリの情報が書かれていることがわかります。

最後に```reboot```によって再起動してみましょう！うまく動きました！

続きは Laravel を Conoha VPS 上で連携させます.
https://qiita.com/YSY/items/3a5f824aad81863ed881


※以下のエラーが出た時

```
Permission denied: AH00957: HTTP: attempt to connect to 127.0.0.1:3000 (localhost) failed
```

```
/usr/sbin/setsebool -P httpd_can_network_connect 1
```
により解決した.

# 画像をFTPでアップロードできるようにした
vsftpを入れて、https://qiita.com/morih90/items/56aec95f25c0158848b0 などを参考にしながら21番を開ける。lsofとかでポートが空いてることを確認する。
クライアントはなんでもいいけどmacだとデフォでsftpが入っている。
 
```
put 作成したユーザ@ドメイン
put -r hoge_dir
```
とかでアップロードできる。

ssl.confに以下のようにProxyPassを追加し、画像を見れるようにした。

```apache
ProxyPass /api http://127.0.0.1:81/api
ProxyPass /storage http://127.0.0.1:81/storage
```

Apacheの再起動とかNuxtの.envのリロードを忘れないようにする.