第13篇 在Linux上部署vue项目,并通过nginx代理
如何在Linux服务器上部署Vue项目
1.在本地电脑打开vscode,进入Termial,切换到项目所在的目录
以项目运行在vscode为例,在调试窗口输入 npm run build待命令执行完毕之后,在项目目录下会生成dist文件夹,如下图
2.创建一个运行文件,名字是:server.js
server.js中的内容如下:
const express = require('express');
const app = express();
app.use(express.static('./dist'));
//运行时的端口,可以自己自定义
const port = 7777;
app.listen(port, function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:' + port + '\n');
});
3.打包上传文件并将该文件上传到linux中
在windows中创建一个文件夹,名字自取,例如buildtest。将项目中的dist、node_modules、server.js复制到buildtest中,如下图
4.上传到Linux中 ,在服务上创建存放项目的目录 ,可通过finalshell工具上传
5.解压buildtest.zip并运行
cd 到Linux中存放buildtest.zip的目录中,执行命令 unzip buildtest.zip即可解压buildtest.zip并存放在同级目录中,
解压成功之后,cd 到buildtest中, cd buildtest
然后运行: node server.js
或者守护进程运行:nohup node server.js &
出现如下图的监听就已经启动完成
6.查看是否运行
打开浏览器,输入,服务器IP+端口,例如:http://192.168.1.112:7777,别输入http://localhost:7777, ip地址可以是你的实际服务器地址或者域名,当然域名需要做dns解析才能访问
6.查看是否运行
打开浏览器,输入,服务器IP+端口,例如:http://192.168.1.112:7777,别输入http://localhost:7777, ip地址可以是你的实际服务器地址或者域名,当然域名需要做dns解析才能访问
7.如果访问不了,可以从以下几个方面处理:
1.nginx服务没有启动或者nginx.conf配置文件的监听端口与你在vue项目中的server.js文件中配置的端口不一致,需要确保一致
2.server.js配置的端口实际并没有被监听,可以执行命令查看端口的监听:netstat -tuln | grep 8888
如果出现如下图,表示已经启动监听,没有出现表示没有成功,需要在防火墙设置
3.防火墙设置监听端口可访问;
可先查看可以访问的端口:firewall-cmd --zone=public --list-ports
然后设置:sudo firewall-cmd --zone=public --add-port=8888/tcp --permanent
最后重启:sudo firewall-cmd --reload
4.通过查看nginx的日志文件查看具体错误
查看错误日志命令:
cat /var/log/nginx/error.log
查看配置日志命令:
cat /var/log/nginx/access.log
5.当出现如下图的错误时表示nginx配置有错,或者未启动,可以重新启动或检查配置
6当出现如下错误时,是vue项目访问的地址路由配置不对,可以去检查 以下几个文件的路径配置
或者检查你的服务器nginx上的配置文件:
1.检查 Nginx 主配置文件:sudo nano /etc/nginx/nginx.conf
2.检查 conf.d 目录:ls /etc/nginx/conf.d/
3。创建虚拟主机配置文件:
如果 sites-available 和 sites-enabled 目录不存在,你可以手动创建它们:
sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
创建一个新的虚拟主机配置文件:sudo nano /etc/nginx/sites-available/default
在文件中添加以下内容(根据你的需求进行修改):
server {
listen 80;
server_name csbneter.club;
location / {
proxy_pass http://127.0.0.1:8888;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
创建符号链接以启用配置文件:sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
4.检查 Nginx 配置并重新加载:
sudo nginx -t
sudo nginx -s reload
5.重新启动vue项目:nohup node server.js & 或者 nohup npm run serve &
以上的两种启动方式存在缺陷,因为如果断开finalshell的会话连接服务器,vue项目就会停止运行,导致域名访问不了网站,
保险起见可以通过以下几种方式启动:
方式1: 启动项目后,将会话与项目启动的进程隔离:
nohup node server.js &
disown
方式2. 使用 screen 或 tmux
screen 和 tmux 是终端多路复用器,可以让你在多个虚拟终端之间切换,并且可以在断开连接后保持会话运行。
使用 screen
创建一个新的 screen 会话:
screen -S mysession
在会话中启动 Node.js 服务器:
node server.js
按 Ctrl+A 然后按 D 可以 detach 当前会话,返回到原始终端。你可以使用以下命令重新 attach 会话:
screen -r mysession
使用 tmux
创建一个新的 tmux 会话:
tmux new -s mysession
在会话中启动 Node.js 服务器:
node server.js
按 Ctrl+B 然后按 D 可以 detach 当前会话,返回到原始终端。你可以使用以下命令重新 attach 会话:
tmux attach -t mysession
-
使用 systemd 服务
你可以将 Node.js 服务器配置为 systemd 服务,使其在系统启动时自动运行,并在后台持续运行。
创建服务文件:sudo nano /etc/systemd/system/myapp.service
在文件中添加以下内容:
[Unit]
Description=My Vue.js Application
[Service]
ExecStart=/usr/bin/node /path/to/your/server.js
WorkingDirectory=/path/to/your/project
Restart=always
User=yourusername
Group=yourgroup
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
[Install]
WantedBy=multi-user.target
保存并关闭文件,然后重新加载 systemd 配置:
sudo systemctl daemon-reload
启动服务:
sudo systemctl start myapp
设置服务开机自启动:
sudo systemctl enable myapp
示例
假设你已经创建了 server.js 文件,并且位于项目目录下,你可以按照以下步骤使用 screen 命令将 Vue 项目在后台运行:
创建一个新的 screen 会话:
screen -S mysession
在会话中启动 Node.js 服务器:
node server.js
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体