一、 npm run export导出文件上传到CDN

在项目中执行npm run export后导出outCDN文件上传到CDN

// scripts/upload.jsconst fs = require('fs');
const path = require('path');
const OSS = require('ali-oss');const filePath = path.join(__dirname,'../outCDN');
const excludeFiles = ['index.html']const client = new OSS({region: 'oss-cn-shenzhen',accessKeyId: '',accessKeySecret: '',bucket: ''
});// 遍历文件夹中所有文件
async function uploadFile(filePath){//根据文件路径读取文件,返回文件列表fs.readdir(filePath,async function(err,files){if(err){console.warn(err)}else{//遍历读取到的文件列表files.forEach(async function(filename){//获取当前文件的绝对路径const filedir = path.join(filePath,filename);//根据文件路径获取文件信息,返回一个fs.Stats对象fs.stat(filedir,async function(eror,stats){if(eror){console.warn('获取文件stats失败');}else{const isFile = stats.isFile();//是文件const isDir = stats.isDirectory();//是文件夹if(!excludeFiles.includes(filename) && isFile){const fileKey = `${filedir.split('outCDN/').pop()}`try {// object表示上传到OSS的Object名称,localfile表示本地文件或者文件路径let data = await client.put(fileKey,filedir);console.error('upload success: %j', data);} catch(err) {console.error('upload failed: %j', err);}}if(isDir){uploadFile(filedir);//递归,如果是文件夹,就继续遍历该文件夹下面的文件}}})});}});
}uploadFile(filePath)

二、处理next build后的文件

执行next build以后,把.nextpackage.jsonserver.jsnext.config.jsecosystem.json 拷贝到一个文件夹统一管理,最后部署这个文件夹下的内容即可

// scripts/copyFiles.jsconst fs = require( 'fs' ),stat = fs.stat;const path = require('path')const includeFiles = ['package.json','server.js','next.config.js','ecosystem.json']/** 复制目录中的所有文件包括子目录* @param{ String } 需要复制的目录* @param{ String } 复制到指定的目录*/
const readDir = function( src, dst ){// 读取目录中的所有文件/目录fs.readdir( src, function( err, paths ){if( err ){throw err;}paths.forEach(function( filename ){var _src = src + '/' + filename,_dst = dst + '/' + filename,readable, writable;stat( _src, function( err, st ){if( err ){throw err;}// 判断是否为文件if( st.isFile()){// 创建读取流readable = fs.createReadStream( _src );// 创建写入流writable = fs.createWriteStream( _dst );// 通过管道来传输流readable.pipe( writable );}// 如果是目录则递归调用自身else if( st.isDirectory()){copyDir( _src, _dst, readDir );}});});});
};// 在复制目录前需要判断该目录是否存在,不存在需要先创建目录
const copyDir = function( src, dst, callback ){fs.exists( dst, function( exists ){// 已存在if( exists ){callback( src, dst );}// 不存在else{fs.mkdir( dst, function(){callback( src, dst );});}});
};const copyFile = ()=>{includeFiles.forEach(filename=>{fs.createReadStream(path.join(__dirname,'../'+filename)).pipe(fs.createWriteStream(path.join(__dirname,'../deployBuildFiles',filename)))console.log('拷贝完成!')})
}// 复制目录
copyDir( '.next', 'deployBuildFiles/.next', readDir);// 拷贝文件
copyFile()

三、pm2之ecosystem部署项目

PM2部署应用流程,通过pm2的配置文件来部署
http://pm2.keymetrics.io/docs/usage/deployment/

3.1 配置部署脚本文件

在项目根目录添加pm2的部署脚本文件 ecosystem.json

部署文档详情:http://pm2.keymetrics.io/docs/usage/deployment/

{"apps": [{"name": "goodsapp", //pm2运行的应用名称"script": "server.js",//服务启动入口"env":{"COMON_VARIABLE": "true"},"env_production": {"NODE_ENV": "production", //env"HOST": "localhost"}}],"deploy": {// 最后这样使用 pm2 deploy ecosystem.json production"production": {"user": "user_00",// 服务器用户名"host": ['192.68.1.201'],//服务器ip地址 可写多个"ref": "origin/master",//从指定分支拉取代码"repo": "http://p.yesdat.com/diffusion/49/goodsh.git","path": "/data/poetry/testDir/prev-goods.yesdat.com", //上传本地目录到服务器"ssh_options": "StrictHostKeyChecking=no","post-deploy": "npm install --registry=https://registry.npm.taobao.org && npm install && pm2 startOrRestart ecosystem.json --env production",//部署脚本"env": {"NODE_ENV": "production"}}}
}

或者简单scp上传到服务器

scp -P36000  -r deployBuildFiles/.next user_00@192.168.1.201:/home/data/services/goods-prev.yesdat.com/

更多详情 http://blog.poetries.top/2018/12/03/linux-scp

3.2 部署Nginx配置规则

  • nginx之location的匹配规则
  • Nginx学习篇

nginx安装目录下的vhost中新建一个xx-3000.conf的配置文件

  • 在Nginx目录/etc/nginx下执行 sudo /usr/sbin/nginx -t 检测配置文件是否成功

upstream goodsapp { // website项目的目录名称server 127.0.0.1:3000; // 服务器上的本地启动入口,端口对应项目中server.js中的端口
}// 配置server
server {listen 80;server_name prev-goods.yesdat.com; //指向的域名location / {proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Nginx-Proxy true;proxy_pass http://goodsapp; // 请求将会转发到goodsapp的node服务下proxy_redirect off;}// 处理静态资源location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt) {root /data/goodsapp/static; //请求转发到静态资源路径}
}

更多配置参考 https://github.com/poetries/poetry-configure/blob/master/nginx.conf

3.3 本地项目根执行的命令

  • pm2 deploy ecosystem.json goodsapp setup 初始化
  • pm2 deploy ecosystem.json goodsapp 部署

3.4 部署到阿里云

第一步:配置Nginx

查看Nginx安装路径 which nginx 注意/etc/nginx/usr/local/nginx/下的nginx区别

# 切换到Nginx当前目录下
/usr/local/nginx/conf/# 创建vhost
mkdir vhost# 创建goodsapp-3001.conf,内容如下server {listen 8080; server_name 39.108.74.36;# 在ifconfig的拿到的ip地址或者是公网ip,这里填公网ip,如果是域名阿里云需要备案才可以正常访问location / {proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Nginx-Proxy true;proxy_pass http://127.0.0.1:3001;# 把172.16.0.223:8080的请求转发代理到本机的3001端口}
}# 在/usr/local/nginx/sbin/nginx/conf/nginx.conf下include创建的vhost文件
include /etc/nginx/vhost/*.conf; # 在文件最后include配置文件# 在/usr/local/nginx/sbin/nginx/conf/nginx.conf下执行检测配置文件
sudo /usr/local/nginx/sbin/nginx -t# 重新加载Nginx配置
/usr/local/nginx/sbin/nginx -s reload

一些注意事项

  • server_name可以是域名,也可以是ipip可以是本地,也可以是公网ip

本机ip

公网ip

  • 阿里云防火墙规则设置

这里访问了 8080需要在阿里云后台配置一下

第二步:pm2部署到服务器

首先在服务端全局安装pm2npm node并且建立软链

npm i pm2 -g

重要:请注意:

一定要做建立软链这步,否则出现如下问题

建立npm 软链

建立node 软链

建立pm2 软链

正式部署

  • 根目录执行pm2 deploy deploy-app.json production setup 初始化服务端环境
  • 根目录执行pm2 deploy deploy-app.json production --force 输入服务端用户root密码,部署即可

来到/home/production目录查看上传的文件

{"apps": [{"name": "goodsapp-prev","script": "server.js",# 根目录server.js文件"env":{"COMON_VARIABLE": "true"},"env_production": {"NODE_ENV": "production"}}],"deploy": {"production": {"user": "root",//用户名"host": ["39.108.74.36"], //公网ip"ref": "origin/master","repo": "https://gitee.com/Poetries1/goods-prev.yesdat.com.git","path": "/home/production","ssh_options": ["StrictHostKeyChecking=no", "PasswordAuthentication=no"],"post-deploy": "npm install && pm2 startOrRestart deploy-app.json --env production","pre-deploy-local": "echo 'Deploy Done!'","env": {"NODE_ENV": "production"}}}}

更多配置信息 http://pm2.keymetrics.io/docs/usage/deployment/

  • pm2 list查看启动的项目

  • pm2 logs查看启动日志

然后在浏览器访问http://39.108.74.36:8080(http://公网ip:端口)即可看到,到此部署结束

3.5 部署更多参考

  • next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序
  • 学习 Next.js: 部署
  • Deployment on Nginx’s reverse proxy
  • 将nodejs代码部署到阿里云服务器
  • Nginx从听说到学会

next项目部署到服务器pm2进程守护相关推荐

  1. Flask项目部署云服务器 CentOS7.3+Redis+MySQL+Flask+Nginx+Gunicorn +Supervisorctl

    Flask项目部署云服务器 CentOS7.3+Redis+MySQL+Flask+Nginx+Gunicorn +Supervisorctl 项目运行环境 阿里云(单核CPU, 2G内存, Cent ...

  2. 如何将本地python项目部署到服务器上_如何将本地的Django项目部署到云服务器

    如何将本地的Django项目部署到云服务器 开发环境 开发语言: Python 后台框架:Django 前端框架:bootstrap web服务器:nginx wsgi服务器:uwsgi 查看本地项目 ...

  3. java linux 服务_java项目部署Linux服务器几种启动方式总结经验

    一:两种部署包: 部署之前先说下两种包,java项目部署到服务器一般有用war包的,也有用jar包的,微服务spring-cloud普及后大部分打包都是jar,部署之前先搞清楚自己要打war包还是ja ...

  4. 将Django项目部署到服务器

    将Django项目部署到服务器 效果 准备云服务器 服务器链接xshell 安装宝塔 进入宝塔 添加站点 打包本地django文件上传 宝塔面板安装python管理器 django配置文件 配置数据库 ...

  5. 前后端分离项目部署(服务器或本地)

    文章目录 前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 后端部署(以Springboot项目为例) 补充 前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 部署环境 ...

  6. vue框架项目部署到服务器_在浏览器中在线尝试无服务器框架项目!

    vue框架项目部署到服务器 无服务器框架是无服务器工具的一致领导者. 但是,没有简单的方法可以在线试用无服务器框架项目. 您确实需要一个体面的开发人员设置,并且需要一些工作来设置sls , npm等. ...

  7. 如何将项目部署到服务器:从选择服务器到维护应用程序的全流程指南

    将项目部署到服务器是一个重要的技能,对于开发人员来说,它是必不可少的.在本文中,我将介绍一些关于如何将项目部署到服务器的最佳实践. 一.选择服务器 在部署项目之前,你需要先选择一个适合你的服务器.如果 ...

  8. egg项目部署到服务器

    egg项目部署到服务器 一.购买服务器 我这以阿里云服务器为例子 直接进入阿里云官网进行查看相关服务器,选择适合自己的购买 可在阿里云查看服务器状态,账号密码就是购买服务器时注册的账号密码 进入服务器 ...

  9. vue项目部署到服务器后浏览器标签上的小图标消失不见

    背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...

  10. 如何将项目部署到服务器上

    一.购买服务器 打开服务器官网3A服务器,在里面购买后会有专人在线聊,挺不错的 二.用Xshell连接服务器 下载Xshell输入公网IP以及创建时的账号密码进行连接 三.安装Java环境 1.下载O ...

最新文章

  1. usaco Raucous Rockers(dp)
  2. 科略教育——执行力的3W管理法
  3. IOS -- UICollectionView里面的cell点击,点击一个cell改变其他cell的状态
  4. php interbase,PHP: Firebird/InterBase - Manual
  5. Linux初学:(二)Shell环境与命令基础
  6. creo管道设计教程_Creo产品设计教程:握力器弹簧建模,一个技巧轻松搞定
  7. Win32 控件篇(6)
  8. 服务器客户端对话java_java中的服务器和客户机如何使用
  9. Python精通-Python字符串格式化操作
  10. centos 7 redis-4.0.11 主从
  11. 学习pytorch: 深度学习入门建议
  12. 拓端tecdat|R语言用RNN循环神经网络 、LSTM长短期记忆网络实现时间序列长期利率预测
  13. 传智播客 python 私有化学习笔记
  14. 计算机无法访问iTunes,PC端itunes识别不了iphone怎么办 itunes无法识别插入iPhone解决方法...
  15. [办公自动化]名师推荐-excelpro刘万祥 图表之道作者
  16. 解决阿里云轻量应用服务器不能安装应用
  17. java咖啡是研磨的吗_咖啡的研磨程度,真的很重要吗?
  18. python从属关系编号_42:对象、类、以及从属关系
  19. 图像自动裁剪和角度矫正
  20. 【vue】vue安装卡住/报错

热门文章

  1. nnet3-compute计算chain前向传播概率矩阵(声学模型输出)
  2. tassel软件使用linux,科学网—TASSEL 关联分析软件 起步教程 - 邓飞的博文
  3. 宝贵的核心珍藏_建立成功的神经网络的10个宝贵技巧
  4. 步进电机、伺服电机、舵机的区别与控制(角度、转速)
  5. PHP回纹判断_第四十八章 回纹考核
  6. 「Pytorch」CNN实现手写汉字识别(数据集制作,网络搭建,训练验证测试全部代码)
  7. 【C语言】abs()用法及其他绝对值函数
  8. 服务器虚拟化的几种方式,服务器虚拟化究竟应当选择哪种方式?
  9. C#修改Windows系统时间
  10. 论文笔记 Triformer: Triangular, Variable-Specific Attentions for Long SequenceMultivariate Time Series