如何使用docker部署vue项目

Posted 2023-03-19

参考技术A 熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。

上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。

除了上面两种还有一种现在比较火的部署方式，就是docker部署，当然正如上面说的，docker也是要实现上面的操作，只不过有些差异而已。

针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等操作。这些操作一般在写入镜像执行。

这样做的目的跟docker的理念是一致的，功能解耦，方便维护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等操作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。

那么如何实现docker部署vue项目呢，操作如下参考：

文件目录如下：

在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：

build项目：

Build完成后会生成dist目录

然后在vueProject根目录下打开命令行执行如下命令生成镜像：

注意最后是一个点，代表在当前目录执行Dockerfile

如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。

启动镜像：

—name vp 代表自定义启动的镜像名称

-dp 是-d,-p的简写

8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80

最后就是之前生成的镜像名称。

大功告成。

更多详情：javascript技术分享

Docker 部署前端项目 (vue)

vue 项目架构

Vue 3 + TypeScript + Vite

Docker

Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等打包到这个容器中然后发布应用。

如何安装

安装 docker 以及一些问题参考博主其它文章最好安装一个 docker desktop (这样就不用记命名敲)

项目目录

babel.config.js
dist
Dockerfile
index.html
Nginx.conf
node_modules
package.json
public
README.md
src
	...
vue.config.js
yarn-error.log
yarn.lock
.eslintrc.js
.prettierrc.js
...

部署项目要准备 Dockerfile 和 nginx.conf 在项目根目录新建文件

Dockerfile 配置

FROM node:latest as builder
WORKDIR /app
COPY package.json
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist  /usr/share/nginx/html

1. WORKDIR： 设置容器内部的工作目录
2. EXPOSE： 指定运行镜像的容器使用的端口
3. RUN ： 指令 docker 在镜像内执行的命令
4. FROM ：通过 FROM 指定的镜像名称，必须位于第一条非注释指令
5. ADD 和 COPY： 将文件或目录复制到 Dockerfile 构建的镜像中

Nginx.conf 配置

events 
  worker_connections  1024;

http
  server 
    listen       80;
    server_name  localhost;
    location / 
      root   /usr/share/nginx/html;
      index  index.html index.htm;
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html 
      root   /usr/share/nginx/html;
    
  

创建镜像

使用当前目录的 Dockerfile 创建镜像，标签为 vuedocker

docker build -t vuedocker .

用容器启动镜像

1.使用 docker 镜像 frontend:latest 以指定 80 端口映射模式启动容器,并将容器命名为
vuedocker
docker run --name vuedocker -p 80:80 frontend:latest
2. 如安装 docker desktop 可直接在 Images 里面使用 RUN Containers (配置好 Containers name 与PORTS)

两种方式二选一