Docker 部署前端项目 (vue)

Posted 2023-03-23 kleinvir

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)

两种方式二选一

gitLab CI/CD docker自动部署vue前端项目

参考技术A 查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：

1..gitlab-ci.yml 文件

stages:

- build

- deploy

# 设置缓存

cache:

paths:

- node_modules/

- dist/

# 安装依赖 before_script 会在每个 stages 执行之前运行

before_script:

- npm install

# 编译 这里对应上方 stages ，

build:

stage: build

script:# script 为要执行的命令，可以多条按顺序执行

    - npm run build:prod

docker-deploy:

stage: deploy

# 执行Job内容

  script:

# 通过Dockerfile生成pactera_pflife_ui镜像

    - sudo docker build -t pactera_pflife_ui .

# 删除已经在运行的容器

    - if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi

# 通过镜像启动容器

    - sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui

tags:

# 执行Job的服务器

    - pflife-web

only:

# 只有在master分支才会执行

    - dev_xht

2.Dockerfile 文件

# 设置基础镜像

FROM nginx:latest

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

COPY dist/ /usr/share/nginx/html

# 用本地的 default.conf 配置来替换nginx镜像里的默认配置

COPY default.conf/etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx","-g","daemon off;"]

3.default.conf文件

server

listen      80;

server_name  39.100.9.6; # localhost修改为docker服务宿主机的ip

location /

root  /usr/share/nginx/html;

index  index.html index.htm;

try_files $uri $uri/ /index.html =404;



location /api/

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header REMOTE-HOST $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass http://39.100.9.6:8090/;



error_page  500 502 503 504  /50x.html;

    location = /50x.html

root  html;





总之，三个文件部署之后运行正常