ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

手把手教你用Nginx部署Spring Boot + Vue项目到服务器

手把手教你用Nginx部署Spring Boot + Vue项目到服务器 一、准备工作首先你需要有一台服务器比如阿里云、腾讯云的ECS或者自己装个虚拟机都行系统推荐Ubuntu 20.04/22.04或者CentOS 7/8。假设你已经通过 SSH 连上了服务器ssh root你的服务器IP我们就可以开始了。二、下载NginxNginx 是我们这次的大管家负责接待用户请求、分发静态页面、转发 API 请求。下载地址https://nginx.org/en/download.html三、Nginx安装下载完是一个zip文件双击解压就能直接用了不用安装。使用命令检查是否安装成功nginx -v命令启动start nginx验证Nginx是否启动成功打开浏览器访问 http://localhost:80或者 http://你的服务器IP。如果能看到 Nginx 的欢迎页面就说明启动成功了。四、Java 项目打包这里以 Maven 打包为例第一步先把项目停掉第二步按照下图步骤进行打包。打包完成后在target目录下会生成一个.jar文件。看到这个文件就说明打包成功了。五、Vue项目打包在项目根目录下执行以下命令即可完成打包。npm run build打包完成后项目目录下会自动生成一个dist文件夹。看到这个文件夹就说明打包成功了。六、部署准备在开始部署之前先检查一下服务器的环境是否就绪JDKJava 项目需要版本要和你的 Spring Boot 项目匹配一般 Java 8、11、17 或 21Node.js如果需要在服务器上打包前端项目才需要本地打包好上传的话可以跳过数据库MySQL、PostgreSQL 等确保你的后端能连上把刚刚 Vue 项目打包好的 dist文件夹拷贝到服务器的 Nginx 目录下的html文件夹里。把刚刚打包好的 Java 项目 Jar 包拷贝到服务器的任意位置注意要记住存放路径后面配置会用到。可以参考我的我在桌面新建了一个Jar文件夹存放到里面进入 Jar 包所在的目录然后执行下面这条命令就能启动Java -jar xxx.jar --改成你jar包的名称进入服务器的 Nginx 配置文件目录conf修改 nginx.confhttp { include mime.types; default_type application/octet-stream; #log_format main $remote_addr - $remote_user [$time_local] $request # $status $body_bytes_sent $http_referer # $http_user_agent $http_x_forwarded_for; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { #监听的端口号 listen 80; #设置访问的二级域名 server_name demo.eysource.com; #charset koi8-r; #access_log logs/host.access.log main; location /{ #配置访问的项目路径注:这里重点 proxy_pass http:********:9091/ # root html; # index index.html index.htm; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 100m; root html; index index.html index.htm; } } server { #监听的端口号 listen 80; #设置访问的二级域名 server_name aaa.eysource.com; #charset koi8-r; #access_log logs/host.access.log main; location /{ #配置访问的项目路径注:这里重点 proxy_pass http:********:8080/ # root html; # index index.html index.htm; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 100m; root html; index index.html index.htm; } } }最后双击 nginx.exe 启动或者使用以下命令启动 Nginxstart nginx
返回列表