tomcat同时部署springboot(idea)项目和vue项目(webstorm)

tomcat同时部署springboot(idea)项目和vue项目(webstorm)

1 后台项目打包

1.1 打包后台springboot的项目 选择File->Project Structure 然后根据下图所示 选择 Artifacts 右键Add一个 Web Application Archive 然后应用 ok

1.2 选择 Build --> build Artifacts 选择你刚才添加的项目 选择build打包一下

1.3 然后项目中会生成一个 out的文件夹 你的项目就在里面 是一个war包

2 前台vue项目webstrom的打包

2.1 首先配置一下项目的 config/index.js文件 以我的为例

dev: {
    // env: require('./dev.env'),
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      //为了匹配代理地址，在前面加一个  /api
      '/api': {
        target: 'http://localhost:8088/',
        changeOrigin: true,//是否跨域
        secure: false,   // 如果是https接口，需要配置这个参数为true
        pathRewrite: {
          '^/api': '/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */
    https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

2.2 这边要注意下 assetsSubDirectory: ‘./static’,
assetsPublicPath: ‘./’,前面加 ‘./’ 为了可以访问静态资源 要不然打包后你要去打包好的项目里 手动添加./ （所以的js引入的css的引入链接地址）

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    //设置如下打包就不需要手动改打包后的index.html
    //部署
    // assetsPublicPath: './',//方式一
    // assetsPublicPath: '/hot/',//hot项目上级包名 方式二

    assetsSubDirectory: './static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
 }

2.3 然后你就可以输入打包命令 npm run build 来进行打包了 打包完后项目中会出现 dist的文件夹 项目就在里面 到时候项目名就是这个 打包的包名 （默认是这个）

3 安装tomcat(1.8)

3.1 配置jdk jre的环境变量JAVA_HOME JAVA_JRE 这边一定要使用jdk1.8的版本 因为springboot的项目默认最低就是1.8的(访问不到 我是卡了很久 特别嘱咐一下)

3.2 把两个打包的项目放到tomcat的 webapps目录下

3.3 配置config/server.xml文件 端口号这边就不说了
3.3.1 先配置后台的项目 重点是增加一个Context 配置 docBase 是项目所在路径 可写相对地址 path是我写了/api是方便前台调用的 单独项目 可不写

```javascript
 <!-- 后台接口项目api -->
   <Service name="Catalina">
    <Connector port="8088" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />  
    <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
    <Engine name="Catalina" defaultHost="localhost">
      <Realm className="org.apache.catalina.realm.LockOutRealm">     
        <Realm className="org.apache.catalina.realm.UserDatabaseRealm"
               resourceName="UserDatabase"/>
      </Realm>

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
        <Context docBase="/Users/lisen/Downloads/2019-12-30/apache-tomcat-8.5 1.45/webapps/hello_war" path="/api" reloadable="true" />
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
      </Host>
    </Engine>
  </Service> 

3.3.2 前台项目配置server.xml 就是再增加一个Service的配置 跟后台雷同 这边

``` 3.4 然后到bin目录下去 运行stratup文件 mac中stratup运行权限不足 可查看此目录下所有文件的权限

ls -la *.sh

可在 命令行模式 给予权限

chmod -R u+x ./bin

4 部署完全 可以用浏览器访问了