发布简单的前后端项目到 liunx系统上 通过nginx 代理

本文详细介绍如何在Linux服务器上使用Nginx部署Vue项目,包括Node.js与Nginx的安装、Vue前端文件的放置及nginx.conf配置,解决静态文件访问问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一次是window 上直接启动的所以没有用到nginx 后来发布到liunx 所以才用 nginx
在服务器上安装node.js
安装 nginx
将vue前端文件放在目录下面
然后在配置 nginx。conf 文件

静态文件找不到的原因是因为
在打包的时候在这里插入图片描述
这里默认的就没有 “./” 所以就不需要去动 这个配置
之前在这里面加了 。/ 静态文件 比如照片 等背景图

如果是上传到服务器上面的 的文件 要能访问的话可以采用一个 路径去指定
详情请看 https://mp.youkuaiyun.com/mdeditor/93852256# 这条博客 nginx 的相关配置里面都有

### 部署 Vue 和 Spring 构成的前后端分离项目的教程 以下是将 Vue 和 Spring 构建的前后端分离项目部署到 Linux 虚拟机的具体流程: #### 1. 准备工作 确保已经准备好以下资源: - 已经开发完成并打包好的前端 (Vue) 和后端 (Spring Boot) 项目文件。 - 可访问的 Ubuntu 或其他 Linux 发行版虚拟机。 --- #### 2. 后端项目部署 ##### a. 连接服务器 通过工具 FinalShell 或者 SSH 命令连接至目标 Linux 虚拟机[^3]。 ##### b. 安装 Java 环境 如果尚未安装 JDK,可以通过以下命令安装 OpenJDK: ```bash sudo apt update && sudo apt install default-jdk -y ``` 验证安装成功: ```bash java -version ``` ##### c. 配置 Spring Boot 应用程序 上传已构建好的 `.jar` 文件到服务器指定目录(如 `/home/springboot/`),并通过以下命令启动应用程序: ```bash nohup java -jar your-spring-boot-app.jar > app.log 2>&1 & ``` 其中 `your-spring-boot-app.jar` 是实际的应用名称。日志会保存在当前路径下的 `app.log` 中以便后续排查问题[^1]。 调整配置文件中的 IP 地址为服务器公网地址或者本地回环地址 (`0.0.0.0`),使得外部可以正常访问 API 接口。 --- #### 3. 前端项目部署 ##### a. 安装 Nginx Nginx 将作为反向代理来处理静态资源请求以及转发给后端接口调用。执行如下操作安装 Nginx: ```bash sudo apt update && sudo apt install nginx -y ``` 检查状态确认运行无误: ```bash systemctl status nginx ``` ##### b. 静态资源配置 将编译后的 Vue 项目文件夹复制到默认网站根目录 `/var/www/html/` 下面,并修改其权限允许读取内容: ```bash cp -r dist/* /var/www/html/ chmod -R 755 /var/www/html/ ``` 编辑站点配置文件以支持 SPA 单页面应用模式,在 `/etc/nginx/sites-available/default` 添加重写规则: ```nginx location / { try_files $uri /index.html; } ``` 最后重启服务使更改生效: ```bash sudo systemctl restart nginx ``` 对于更复杂的场景可能还需要设置跨域资源共享 CORS 头部信息或其他安全措施[^4]。 --- #### 4. 测试与优化 打开浏览器输入域名或 IP 访问首页查看效果;同时利用 Postman 等工具测试 RESTful APIs 是否能够正确返回数据。若有异常则查阅后台打印的日志定位错误原因。 --- ### 注意事项 - **防火墙开放必要端口**:确保 HTTP(80)/HTTPS(443),还有自定义的服务监听端口号未被屏蔽掉。 - **性能监控与扩展能力规划**:随着业务增长考虑引入负载均衡器、缓存机制等手段提升用户体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值