本地手工打包上传部署

一、后端（单体架构）

1. 准备工作

安装JDK

2. 打包项目

在 IntelliJ IDEA 中，打开 Maven 面板，点击 package 命令进行项目打包。

打包成功后，会在项目的 target 目录下生成一个 .jar 文件。

3. 上传 jar 包到服务器

将生成的 jar 包通过 scp、ftp 或其他文件传输工具上传到服务器指定目录。

例如：上传到服务器路径：/home/quanht/demo-springboot​

4. 运行 jar 包

登录服务器，进入 jar 包所在目录，执行以下命令启动应用：

java -jar demo-springboot-0.0.1-SNAPSHOT.jar

后台启动应用：

nohup java -jar demo-springboot-0.0.1-SNAPSHOT.jar > application.log 2>&1 &

后台启动应用后停止命令：

pkill -f demo-springboot-0.0.1-SNAPSHOT.jar

5. 常见问题排查

如果启动时出现如下错误：

可能的原因是 pom.xml 文件中配置了跳过主类的设置。请检查并移除 <skip> 相关配置项，然后重新打包。

修改完成后，重新执行打包和上传流程即可。

前端

1. 准备工作

安装Nginx

2. 构建Vue项目

# 在你的Vue项目根目录下执行
npm run build
# 或者
yarn build

这个命令会生成一个 dist 目录（默认名称，具体取决于 vue.config.js 配置），里面包含了所有需要部署的静态文件（index.html, js/, css/, img/ 等）。

3. 上传构建文件

创建demo-vue目录

sudo mkdir /var/www/demo-vue/

将dist目录下的文件上传到demo-vue目录，如下：

4. Nginx配置

• 创建服务器块配置文件：

  sudo vim /etc/nginx/sites-available/my-vue-app
  

• 在文件中添加以下配置：

  server {
  	# 监听端口
      listen 8081; # ipv4
      listen [::]:8081; # ipv6
  
      # 你的域名或服务器IP地址
      server_name localhost;
  
      # 网站根目录，指向你的Vue构建文件
      root /var/www/demo-vue;
      index index.html;
  
      # 开启gzip压缩
      gzip on;
      gzip_vary on;
      gzip_min_length 1024;
      gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
  
      # 关键：处理Vue Router的history模式
      # 将所有非文件请求重定向到 index.html
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      # 可选：为静态资源设置缓存
      location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
          expires 1y;
          add_header Cache-Control "public, immutable";
      }
  }
  

  • ​server_name: 替换为你的实际域名或服务器IP。
  • ​root: 确保路径与你存放文件的目录一致。
  • ​try_files $uri $uri/ /index.html;: 这是关键配置！它确保当用户直接访问 /about 或刷新页面时，Nginx会返回 index.html，由Vue Router来处理路由，而不是返回404错误。这是Vue Router使用 history 模式所必需的。

• 启用服务器块:创建一个从 sites-available 到 sites-enabled 的符号链接。

  sudo ln -s /etc/nginx/sites-available/demo-vue /etc/nginx/sites-enabled/
  

• 重新加载Nginx以应用配置：

  sudo systemctl reload nginx
  

5. 访问你的Vue应用

打开浏览器，访问你的域名或服务器IP地址：

http://your_server_ip:port

‍