laravel forge로 vue nuxt 배포하는법 #deploy #배포 #nuxt #vue #nuxt배포

# What?

Laravel forge로 vue nuxt 프로젝트 배포하는법

 

# How?

- 프로젝트 생성

- proejct Type은 "State HTML"
- web Directory는 "/"로 설정 (advanced로 선택해야 보임)

- reposity 연결 (composer install 옵션 체크해제하기)

 

- ssl 설정하기(ssl탭 -> let's encrypt)

 

- ngnix 설정 변경하기

* [웹사이트폴더명, 기존SSL넘버, 웹사이트도메인, 포트번호(기본이 3000)]

-> 한 서버에 여러 nuxt 프로젝트 세팅 시 포트번호를 바꿔줘야함 (3001로 바꾼다던지)

-> 포트번호를 바꿀 경우 ngnix (127.0.0.1:3000), nuxt.config.js, ecosystem.config.js의 포트번호도 변경해야함

-> 아래는 3000이라 써있는데 프로젝트 추가할 경우 3001, 3002 이런식으로 포트번호 변경해야함

@ nuxt.config.js

...

export default {
    target: "server",
    server: {
        port: 3000
    },
	...
}

@ echosystem.js (루트폴더 바로 밑에 생성)

module.exports = {
    apps: [
        {
            name: 'project name',
            script: './node_modules/nuxt/bin/nuxt.js',
            args: 'start',
            port: 3000, // yoru app port
            instances: 'max',
            exec_mode: 'cluster',
            cwd: './'
        }
    ]
};

# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/#{프로젝트폴더명}/before/*;

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
default                     off;
}

server {
    client_max_body_size 20000M;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name #{프로젝트폴더명};

    # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/#{프로젝트폴더명}/#{기존SSL넘버}/server.crt;
    ssl_certificate_key /etc/nginx/ssl/#{프로젝트폴더명}/#{기존SSL넘버}/server.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES';
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/nginx/dhparams.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    # FORGE CONFIG (DOT NOT REMOVE!)
    include forge-conf/#{프로젝트폴더명}/server/*;

    location / {
        expires $expires;

        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_redirect              off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js
}

    access_log off;
    error_log  /var/log/nginx/#{프로젝트폴더명}-error.log error;

    location ~ /\.(?!well-known).* {
    deny all;
}
}

# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/#{프로젝트폴더명}/after/*;

* 프로젝트 폴더명이랑 도메인명 동일하다 가정하고 위와 같이 세팅한거임

 

- package.json에 새로운 명령어 추가

{
    ...
    "scripts": {
        ...
        "prod": "nuxt build && pm2 restart ./ecosystem.config.js"
    },
    ...
}

- Deploy script에 아래 커맨드 추가

npm install && npm run prod

- 위 명령어대로 배포해보고 잘 되면 Enable Quick Deploy 활성(낏허브 올릴때마다 자동배포해줌)

- sanctum 사용 시 배포 후 다음 세팅 반드시 필요

 

1) 클라이언트 도메인으로 서브도메인을 쓸 경우 (ex. wooriview.honest-family.com)

SESSION_DOMAIN=.wooriview.com
SANCTUM_STATEFUL_DOMAINS=*.wooriview.com

-> 근데 서브도메인 안붙으면 그냥 SANCTUM_STATEFUL_DOMAINS=wooriview.com로 해야 돼

2) 클라이언트 도메인으로 서브도메인을 안쓸 경우 (ex. wooriview.com)

SESSION_DOMAIN=.wooriview.com
SANCTUM_STATEFUL_DOMAINS=wooriview.com

-> 오타내서 다시 수정하고 로그인해도 안되면 크롬 시크릿모드로 열어서 로그인해보기(개발자도구에서 쿠키 다 지워도 로그인 계속 안되는 경우 있음. 시간낭비 ㄴㄴ)