华为ECS部署Vue Springboot前后端分离项目

项目打包

Vue项目打包

打包前配置

main.js修改

在这里插入图片描述
将baseURL改为后端所在服务器ip地址
127.23.0.2:8080

config/index.js修改

华为ECS部署Vue Springboot前后端分离项目_第1张图片
改成

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true

PS: 生成的dist文件夹中index.html若还是空白再对应着改相关的js,css路径即可

命令行运行打包

npm run build

生成的dist部署

服务器配置安全组

打开nginx的所需要端口,就可以远程访问了

为服务器下载nginx

解压下载的nginx文件夹,使用cmd进入到nginx文件夹下,使用指令start nginx启动nginx服务器,并localhost:80查看服务器是否启动

修改nginx/conf/nginx.conf文件

server {
        listen       8088;
        server_name  *****;   //改成自己域名或者IP就可以远程访问了

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\Users\Administrator\Downloads\dist;   //改成dist所在路径
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

修改完重启nginx即可生效

可通过域名或者ip访问部署的项目

spring boot项目打包war

基本上网上的都能用,就贴一个吧https://www.cnblogs.com/seve/archive/2019/11/02/11784193.html
ps:建议war包因为jar包的话改成一直运行的有点麻烦

war包部署

放到webapp下的root(也不是很必须),然后修改conf/server.xml,仿照百度到的修改配置加上自己项目对应的context即可

你可能感兴趣的:(JavaWeb)