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

はじめに

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

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

開発環境

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

セットアップ

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

sudo npm install -g nuxt
sudo npm install -g pm2

プロジェクトの作成

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を編集

{
＝＝＝　省略　＝＝＝
  "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を編集

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）

Nginxの設定

sudo vi /etc/nginx/conf.d/default.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

Mobile

終わりに

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

以上です