使用docker部署vue3项目

前言

官方的vue构建基于vite

1，创建vue项目

npm init vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

2，进入项目，安装依赖包，启动项目

cd <your-project-name>
npm install
npm run dev

然后你就可以愉快的开发了，假设开发完成，咱们就要部署项目到服务器，本文用docker部署。

一，没有跨域请求项目的部署

1，构建项目的静态文件

npm run build

在项目根目录会生成dist文件夹，这就是项目的静态资源。

2，文件根目录编写Dockerfile

FROM nginx
COPY ./dist /usr/share/nginx/html

3, 创建名叫vue-nginx的镜像，版本号1.0.0，注意最后的那个点，表示当前目录

docker build -t vue-nginx:1.0.0 .

4，查看本地的镜像

docker images

下面就是我们创建好的镜像

REPOSITORY   TAG     IMAGE ID          CREATED 
vue-nginx    1.0.0   6358a9a572cf      5 minutes ago

5， 使用镜像创建容器

docker run -d --name vue-nginx -p 80:80 vue-nginx:1.0.0

这时候在浏览器查看 http://localhost 就能看到我们的项目了

6，查看容器 docker ps，我们能查看到一个名叫 vue-nginx的容器

docker ps

二，有跨域请求的项目部署

1，如果本地开发的时候我们有跨域请求，在vite.config.js可以设置proxy

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    proxy: {
      // string shorthand
      // "/api": "http://120.26.91.125",
      "/api": {
        target: "http://xxx.xxx.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

这样我们本地开发，跨域使用代理可以解决，但是我们

npm run build

之后生成的静态项目，因为vite只支持本地开发，跨域不起作用了

2，设置nginx的配置文件，在项目根目录下创建名为default.conf的文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    location /api/sts {
       proxy_pass   http://120.26.91.125/sts;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

重点修改proxy_pass这里，根据自己项目的实际情况修改好跨域请求

3，上面修改好之后，我们修改Dockerfile这个文件

FROM nginx
WORKDIR /usr/share/nginx/html
COPY ./dist .
COPY default.conf /etc/nginx/conf.d/default.conf

上面我们增加了最后一句，意思是把default.conf的nginx配置文件复制到容器里想对应的目录

4，然后我们就可以docker创建新的镜像，注意后面的版本号和上次不同，使用1.0.1 ，还有注意最后那个点，表示的当前目录

docker build -t vue-nginx:1.0.1 .

5，docker images 可以查看到我们创建的新镜像vue-nginx:1.0.1

6，使用新镜像创建容器

docker run -d -p 80:80 vue-nginx:1.0.1

这个时候就可以在浏览器打开http://localhost查看我们的项目

7，如果创建失败，看看是不是80端口被占用，如果有容器占用了80端口，使用下面命令可以删除

docker rm -f [容器id]