AWS EC2にCentOS7 + Nginx + pm2 + Nuxt.jsで開発環境を構築する

# AWS EC2にCentOS7 + Nginx + pm2 + Nuxt.jsで開発環境を構築する

## はじめに

スタートアップ企業では、バックエンドからフロントエンドまでやりますが、今回はなんと開発環境の構築作業です！

躓いたことが多かったのでメモとして残します。


## 開発環境

Cloud: AWS EC2（t2.micro）
OS: CentOS7
FW: Nuxt.js
PM: pm2
その他: node.js, npm

## セットアップ

```bash
sudo yum update -y
sudo yum clean all

sudo yum install gcc-c++

sudo yum install nodejs npm
sudo npm install -g n

sudo n stable

sudo yum remove nodejs npm
```

```bash
sudo npm install -g nuxt
sudo npm install -g pm2
```

#### プロジェクトの作成

```bash
cd /var/www/html/
npx create-nuxt-app プロジェクト名

create-nuxt-app v3.3.0
?  Generating Nuxt.js project in プロジェクト名
? Project name: プロジェクト名
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Version control system: Git

cd プロジェクト名
```

```
npm install
npm install --save @nuxtjs/axios
npm install --save @nuxtjs/dotenv
```

#### package.jsonを編集

```json
{
＝＝＝　省略　＝＝＝
  "scripts": {
    "dev": "nuxt-ts --hostname サーバー名,
    "build": "nuxt-ts build",
    "start": "nuxt-ts start --hostname サーバー名",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
＝＝＝　省略　＝＝＝
}
```

#### nuxt.config.jsを編集

```json
import colors from 'vuetify/es5/util/colors'

export default {
＝＝＝　省略　＝＝＝
  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    "@nuxtjs/axios",
    '@nuxtjs/dotenv',
  ],
＝＝＝　省略　＝＝＝
  srcDir: "./",
}
```

```
npm run build
```

## Nginxのインストール

こちらを参照してください

[CentOS 7にNginx stable最新版をインストール（公式repository）](https://qiita.com/witchcraze/items/081ee1470e5fce922ad4)

## Nginxの設定

```bash
sudo vi /etc/nginx/conf.d/default.conf
```

```conf
upstream backend {
    server サーバー名:3000; # サーバー名はAWS EC2のパブリック IPv4 DNSです
}

server {
    listen  80;
    listen  [::]:80;
    server_name サーバー名; # サーバー名はAWS EC2のパブリック IPv4 DNSです

    #charset koi8-r;
    charset utf-8;
    #access_log  /var/log/nginx/host.access.log  main;


    server_tokens off;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass  http://backend;
        #proxy_redirect http:// https://;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        proxy_pass  http://backend;
        #proxy_redirect http:// https://;
    }
}
```


## 使い方

Nginxの再起動

```
sudo systemctl restart nginx
```

pm2の起動

```
pm2 start --name "プロジェクト名" "npm -- run dev" // development

pm2 start --name "プロジェクト名" "npm -- run start" // production
```

pm2のその他コマンド

```
pm2 reload "プロジェクト名"
pm2 restart "プロジェクト名"
pm2 stop "プロジェクト名"
pm2 status
pm2 kill
```


## 起動画面

UI frameworkには**Vuetify.js**を選択しています

#### PC

![2020-10-01_17h08_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/8f282702-4160-27fd-5e10-362b00c806d0.png)

#### Mobile

![2020-10-01_17h12_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/7f13fd6c-0a00-f119-f1a3-681cf47b7830.png)


## 終わりに

情報があまりなくtry&errorを繰り返しながら構築しました
Nginxのリバースプロキシ？の設定でハマりまくりました笑
もっと良い方法があれば知りたいです


以上です