NextJS工程部署到阿里云linux Ecs

nextjs项目有多种部署方式，本文介绍最简单的一种方式，将源码上传到云服务器，编译后使用pm2后台运行nextjs工程。

检查node、npm是否安装

查看npm版本，如果版本较低先升级npm版本

npm -v

卸载

yum remove nodejs npm -y

安装新版本

sudo yum install https://rpm.nodesource.com/pub_21.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y 
sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1

部署和编译

1. 拷贝工程源码目录到服务器，其中node_modules、.git不需要上传

2. 编译

npm run build

使用pm2后台运行nextjs程序

1. 安装pm2

npm install -g pm2

2. 运行

#注意当前是在工程目录下，命令中的名称可以任意命名，pm2管理中起到标识作用，实际运行的程序是当前目录下
pm2 start --name 自定义名称 npm -- start

3. 查看端口占用，如工程中使用的3000，端口列表中也出现了，说明后台运行成功了

netstat -nultp

4. 如果服务器开放了对应端口，可以加端口浏览器访问项目，如果只能开放80，继续nginx

安装配置nginx

1. 安装nginx

yum install nginx -y

2. nginx配置文件(/etc/nginx/etc/nginx.conf)

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
    
    include /etc/nginx/vhosts/*.conf;
}

3. 多工程配置
   创建 /etc/nginx/vhosts/工程名.conf，自行修改域名，确保域名映射已设置好

server {
    listen       80;#443;
    server_name  xxx.xxxx.com;
    root html;
    index index.html index.htm;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
        proxy_set_header Host $host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;

    }
}

4. 启动nginx

# 启动
systemctl start nginx
# 停止
systemctl stop nginx
# 重启
systemctl restart nginx 
# 重新加载配置文件
nginx -s reload

5. 使用域名访问测试

pm2命令介绍

# 查看任务
pm2 list/

# 重启
pm2 restart app_name

# 停止
pm2 stop app_name|app_id

# 停止所有
pm2 stop all

# 删除
pm2 delete app_name|app_id

# 删除所有
pm2 delete all

# 日志
pm2 logs app_name|app_id

# 查看所有日志
pm2 logs