nuxt.js项目如何部署到服务器？

项目打包

1. yarn build或者npm build

需要上传的文件

1. .nuxt目录

2. package.json

3. nuxt.config.js

4. static

5. server目录 （不传会报错ERROR Renderer is loaded but not all resources are unavailable! Please check /www/wwwroot/sanwei/.nuxt/dist/server existence.）

项目打包后上传到OSS

1.需要创建一个deploy.js

1. const OSS = require("ali-oss");
2. const fs = require("fs");
3. const path = require("path");
4. const os = require("os");
5. const PUBLIC_PATH = path.join(__dirname, "/");
6. //需要替换成自己的
7. const client = new OSS({
8. region: 'oss的地理位置',
9. accessKeyId: ' accessKeyId',
10. accessKeySecret: ' accessKeySecret',
11. bucket: 'bucket名字'
12. })
13.  
14. /**
15. *获取文件目录并删除
16. * @param {*} dir //文件目录
17. */
18. async function deleteDir(dir) {
19. let result = await client.list({
20. prefix: dir + "/",
21. delimiter: "/"
22. });
23. if (result.objects) {
24. let aa = [];
25. result.objects.forEach(function (obj) {
26. aa.push(obj.name);
27. });
28. try {
29. await client.deleteMulti(aa, {
30. quiet: true
31. });
32. console.log("删除成功");
33. } catch (e) {
34. console.log("文件删除失败", e);
35. }
36. }
37. }
38.  
39. /**
40. * 遍历文件夹递归上传
41. * @param {path} src 本地路径
42. * @param {string} dist oos文件夹名
43. */
44. function addFileToOSSSync(src, dist) {
45. let docs = fs.readdirSync(src);
46. docs.forEach(function (doc) {
47. let _src = src + "/" + doc,
48. _dist = dist + "/" + doc;
49. let st = fs.statSync(_src);
50. // 判断是否为文件
51. if (st.isFile() && doc !== ".DS_Store") {
52. putOSS(_src, _dist);
53. }
54. // 如果是目录则递归调用自身
55. else if (st.isDirectory()) {
56. addFileToOSSSync(_src, _dist);
57. }
58. });
59. }
60. /**
61. *单个文件上传至oss
62. */
63. async function putOSS(src, dist) {
64. try {
65. await client.put("/" + dist, src);
66. } catch (e) {
67. console.log("上传失败".e);
68. }
69. }
70. /**
71. *上传文件启动
72. *@param {string} dirName 将要上传的文件名
73. */
74. async function upFile(dirName) {
75. try {
76. await deleteDir(dirName);
77. await addFileToOSSSync(PUBLIC_PATH + ".nuxt/dist/client", dirName);
78. console.log(dirName + "上传oss成功");
79. } catch (err) {
80. console.log(dirName + "上传oss成功失败", err);
81. }
82. }
83.  
84. upFile("dist"); //指定oss目录

2.在package.json中添加deploy.js

1. "scripts": {
2. "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
3. "build": "nuxt build",
4. "deploy": "node deploy.js",
5. "start": "cross-env NODE_ENV=production node server/index.js",
6. "generate": "nuxt generate"
7. },

3.在nuxt.config.js中设置publicPath

nuxt publickPath

4.上传文件

1. npm deploy

服务器（以下部分都是在服务器端操作）

1. yum install gcc gcc-c++

安装node,npm环境

1. wget https://npm.taobao.org/mirrors/node/v10.14.1/node-v10.14.1-linux-x64.tar.gz

1. tar -xvf node-v10.14.1-linux-x64.tar.gz

1. mv node-v10.14.1-linux-x64 node

配置环境变量

1. vim /etc/profile
2.  
3. #set for nodejs
4. export NODE_HOME=/usr/local/node （需要替换成自己的Node安装目录）
5. export PATH=$NODE_HOME/bin:$PATH

生效配置文件

1. source /etc/profile
2. node -v
3. npm -v

安装项目依赖

1. npm i --production

安装pm2

1. npm i -g pm2

设置开机自启动

1. pm2 startup
2. pm2 save

使用pm2启动你的nuxt.js

1. pm2 start npm --name "my-nuxt" -- run start

pm2常用命令

1. pm2 list # 查看当前正在运行的进程
2. pm2 start all # 启动所有应用
3. pm2 restart all # 重启所有应用
4. pm2 stop all # 停止所有的应用程序
5. pm2 delete all # 关闭并删除所有应用
6. pm2 logs # 控制台显示所有日志
7. pm2 start 0 # 启动 id为 0的指定应用程序
8. pm2 restart 0 # 重启 id为 0的指定应用程序
9. pm2 stop 0 # 停止 id为 0的指定应用程序
10. pm2 delete 0 # 删除 id为 0的指定应用程序
11. pm2 logs 0 # 控制台显示编号为0的日志
12. pm2 show 0 # 查看执行编号为0的进程
13. pm2 monit my-nuxt # 监控名称为my-nuxt的进程

pm2 list

pm2 list

pm2 logs

pm2 logs

配置Nginx

首先在nginx conf目录下新建一个conf文件我的是在 /www/server/nginx/conf/

配置规则

1. touch sanwei.conf
2. vi sanwei.conf

1. map $sent_http_content_type $expires {
2. "text/html" epoch;
3. "text/html; charset=utf-8" epoch;
4. default off;
5. }
6.  
7.  
8. server {
9. listen 80; # the port nginx is listening on
10. server_name sanwei.suanliutudousi.com; # setup your domain here
11.  
12.  
13. gzip on;
14. gzip_types text/plain application/xml text/css application/javascript;
15. gzip_min_length 1000;
16.  
17.  
18. location / {
19. expires $expires;
20.  
21.  
22. proxy_redirect off;
23. proxy_set_header Host $host;
24. proxy_set_header X-Real-IP $remote_addr;
25. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
26. proxy_set_header X-Forwarded-Proto $scheme;
27. proxy_read_timeout 1m;
28. proxy_connect_timeout 1m;
29. proxy_pass http://127.0.0.1:3000; # set the adress of the Node.js instance here
30. }
31. }

保存退出，然后再在 nginx.conf文件的http中添加 刚才创建的sanwei.conf

重启nginx

启动代码格式：nginx安装目录地址 -c nginx配置文件地址（下面需要替换成你的nginx文件目录）

1. /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf