vite+vue3+ts项目上线docker 配置反向代理API-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite+vue3+ts项目上线docker 配置反向代理API。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这次重点的坑是反向代理。

1。项目中配置代理，为了跨域请求数据

项目根目录中新建vite.config.ts文件

vue3部署到docker,docker,容器,运维

在文件中添加配置代理

vue3部署到docker,docker,容器,运维

注意：其中 '/api' 和target 的地址后面没有 '/'

2。在项目根目录中新建Httprequest.ts文件，引入axios，并封装请求引入axios就不多说了，npm自行安装就好

import axios from 'axios';
import {
  LicId,
  FrontCode,  
  getTime,
  WxAppId
} from './utils/index';
import {
  getToken
} from './utils/token';


// 创建一个axios实例
const instance = axios.create({
  baseURL: '/api', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});


// 请求拦截器
instance.interceptors.request.use(
  async (config) => {
   
  // 发送token请求
    let token = localStorage.getItem('token')?localStorage.getItem('token'):'';
    if(!token){
      token = await getToken();
    }
      
    // 在发送请求之前添加自定义header信息
    config.headers['Authorization'] ='Bearer ' + token;
    config.headers['TimeStamp'] = getTime();
    config.headers['LicId'] = LicId;
    config.headers['FrontCode'] = FrontCode;
    config.headers['WxAppId'] = WxAppId;   

    
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);


  

// 封装GET请求
export function get(url:string, params:any) {
  return instance.get(url, { params });
}

// 封装POST请求
export function post(url:string, data:any) {
  return instance.post(url, data);
}

注意这里，baseURL要和代理中设置的一致

vue3部署到docker,docker,容器,运维

项目正常编写，本地运行，测试正常后，准备上线docker

3。vite打包。注意调整静态资源路径，注意配置package.json，除此以外也没什么

vue3部署到docker,docker,容器,运维

正常按配置执行打包 npm run build:prod —— 这里和package.json里一样就可以了

执行完成后，得到dist文件夹。上线文件就是它了

vue3部署到docker,docker,容器,运维

现在转到服务器上操作

1。将dist上传到服务器的文件夹里，一般是在/www/wwwroot 文件夹下面建立一个新的文件夹，比如叫做 newpro

将dist上传到newpro，注意是整个文件夹上传，不是dist里面的内容上传

2。在newpro文件夹里，建立Dockerfile文件，可以在本地写好，传上去。注意：这个文件没有扩展名

vue3部署到docker,docker,容器,运维

文件内容如下：

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:latest

# 将本地dist文件夹内的内容复制到容器中的nginx默认工作目录
COPY dist /usr/share/nginx/html

# 替换nginx配置文件（如果需要自定义）
#COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露Nginx的默认端口
EXPOSE 80

# 启动Nginx服务
CMD ["nginx", "-g", "daemon off;"]

上传到服务器后：

vue3部署到docker,docker,容器,运维

现在在newpro文件夹里进入终端，执行docker命令，生成镜像。如果你用的是宝塔面板，那么就是下面这样的

vue3部署到docker,docker,容器,运维在终端中执行以下命令,注意最后有个点

docker build -t xxx(英文镜像名称) .

执行成功后，再执行

docker run -d --name 英文的容器名称（自己起） -p 10726:80 镜像名称（刚刚生成的）

注意： 10726：80 分别代表服务器的端口和docker里的端口。这个操作表示把服务器的10726端口映射到docker的80端口上这个10726自己写就可以，只要不和其它端口冲突就行

到此，docker上线完毕

然后要在服务器的nginx中，发布网站，将域名绑定到网站上

网站的配置文件如下：

server
{
    listen 80;
    server_name xxx.net(绑定的域名);
    index index.html index.htm;
    #root /www/wwwroot/hua.crabstech.com;
    location /api/ {
        proxy_pass https://api.net:9006/; #API地址:端口
    }
     location / {

                proxy_pass http://localhost:10726;
        }
    
}

重要坑点来了

vue3部署到docker,docker,容器,运维