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   500502503504/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

1. 如安装 docker desktop 可直接在 Images 里面使用 RUN Containers (配置好 Containers name 与PORTS)

两种方式二选一