Linux _学习——Centos8 部署nodejs+Vue全栈项目

Centos8 部署nodejs+Vue全栈项目

 

环境 ：

• Node API接口

• vue首页，nuxt渲染后台管理

• nginx 域名代理转发

 

 

一.  博客页面 

1.  Nuxt 项目 需要先打包,
   
   把打包后的文件 上传 到服务器 
   
                     
2. nginx 配置
   
   找到 nginx 安装的地方，修改 nginx.conf 配置
    
3.  运行 pm2 start pm2.json

server {  
    listen 80;
    server_name zxxdata.cn;

    location / {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass         http://127.0.0.1:3333;
    }
}

配置效果图 ：

 

 

二. 后台管理

1.  Vue 项目打包出 dist 文件
   
   把打包后的文件 上传 到服务器 
      
           
2. nginx 配置
   
   这里需要 二级域名，在域名解析的时候设置

 server {
        listen 80; # 监听 端口 
        server_name  blogsystem.zxxdata.cn; # 二级域名 

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

        location / {
			root /root/VUEProject/blog/dist;
			index index.html;
        }

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

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

配置效果图 ：

 

 

三.  API 接口 

1.  把 node 项目，node_modules 包文件不用上传
   
      
2. nginx 配置
   
   这里也是设置的二级域名，在域名解析的时候设置
    
3.  运行 pm2 start pm2.json

server {
	listen 80;
	server_name  blogapi.zxxdata.cn;
	
    location / {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass         http://127.0.0.1:3000;
    }

}

配置效果图 ：

 

里面用了 pm2部署可以科普一下怎么配置的生产环境，最后 部署 完成！！！

参考：

• Vue  https://segmentfault.com/a/1190000021530126 
• Nuxt https://segmentfault.com/a/1190000014450967
• Nuxt https://segmentfault.com/a/1190000020452519