前后端部署+nginx配置

概要

内容主要包括部署前端项目，nginx安装配置，以及后端项目的打包

1、脚手架安装

vue init webpack

项目运行（默认端口8080）

npm run dev

如果前后端分离项目，发出axiox请求实现跨域时，需要配置proxy代理

/**
 *  例如这个前端微服务项目访问后端接口时需要带/teacher 路径，而后端服务普遍是/member路径[前端通过端口号来区分后端项目，不能说给这个后端服务请求路径上添加上/tercher]
 *  这个时候，可通过配置proxy代理，在实现跨域的功能外，实现路径重写
 *  如下 后端有个接口如/member/query/getTeacherList
 *  前端通过访问
 *  http://localhost:9500/teacher/member/query/getTeacherList 
 *  代理到 http://localhost:8081/member/query/getTeacherList
 */
    proxyTable: {
      "/teacher": {
        // 目标代理服务器地址
        target: 'http://localhost:8081',
        logLevel: 'debug',
        // 开启代理，本地创建一个虚拟服务器 允许跨域
        changeOrigin: true,
        pathRewrite: {'^/teacher': '/'},
      },
    },
    host: 'localhost', 
    port: 9500, 

2、项目打包部署

• 前端项目打包

​ npm run build

​ 部署：将生成的dist文件夹拷贝至linux文件目录 如/etc/dist【配置nginx要用到】

• 后端项目打包【生成的jar包文件在target目录下】

前提条件：pom配置打包工具

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <fork>true</fork>
            </configuration>
        </plugin>
    </plugins>
</build>

① 通过mvn命令打包

mvn clean install -Dmaven.test.skip=true
-Dmaven.test.skip=true #跳过test模块编译和打包 避免打包出错
#或者
mvn clean install -DskipTests
- DskipTests #不执行测试用例，但编译测试用例类生成相应的class文件至target/test-classes下

② 通过idea配置打包(最简单)

• ③ pom配置 打包跳过测试【测试模块正常编译】

  • 配置pom

  <build>
      <plugins>
          <!-- maven 打包时跳过测试 -->
          <plugin>
              <groupId>org.apache.maven.plugins</groupId>
              <artifactId>maven-surefire-plugin</artifactId>
              <configuration>
                  <skip>true</skip>
              </configuration>
          </plugin>
      </plugins>
  </build>   
  

  • 点击install按钮【可见上图】

  #上述控制台会输出
  [INFO] --- maven-surefire-plugin:3.0.0-M7:test (default-test) @ demo1 ---
  [INFO] Tests are skipped.  #test跳过成功
  

  部署：将jar包拷贝至linux服务器上，运行

   cd jar包路径
  java -jar jar包名称 2>&1 & #后台运行
  

3、配置nginx

• 安装nginx

  su root
  yum install nginx
  #查看nginx是否安装成功
  nginx -v
  

• 配置nginx

  nginx相关文件位置如下：

  /usr/sbin/nginx：主程序
  /etc/nginx：配置文件所在路径
  /usr/share/nginx：静态文件所在路径
  /var/log/nginx：日志文件所在路径
  # 可通过whereis nginx命令查看：
  nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx /usr/share/man/man3/nginx.3pm.gz /usr/share/man/man8/nginx.8.gz
  

  vim /etc/nginx/nginx.conf #修改以下内容
  

  server {
  listen       9000; #监听端口
  server_name  localhost;
  # Load configuration files for the default server block.
  include /etc/nginx/default.d/*.conf;
  location / {
  root /etc/dist; #前端文件放置的文件路径
  index /index.html; #访问路径下的文件入口
  }
  #请求转发配置
  location ~/yujiankai/{ #匹配所有带有yujiankai的路径
  proxy_pass http://服务器ip地址:8001;#转发服务器ip及端口
  }
  error_page 404 /40x.html;1
  location = /40x.html {
  root html;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  root html;
  }
  }
  

  • 重启nginx

    nginx -t // 检验配置是否正确
    nginx -s reload // 重新加载修改的配置
    service nginx restart // 重新启动
    

• 访问nginx监听端口9000

服务器ip地址:9000 #跳转/etc/dist/index.html

【额外】利用docker安装nginx

前提：

docker pull nginx #拉去镜像
docker run --name=mynginx -p 9000:80 -d nginx #启动nginx
docker exec -it mynginx /bin/bash #进入nginx容器
cd /etc/nginx #进入配置文件目录
#docker容器可看作微型linux系统，剩余操作类似上述操作

docker run参数说明

--name 容器名称
-p 挂载端口 服务器9000挂载到容器的80端口（nginx默认端口）
-d 后台运行

注意：配置端口时，记得网关放行

END