前端项目部署到 Docker
环境
- docker
- docker-compose
- nodejs
第一种
使用本地的命令打包到dist文件夹下后,复制到nginx的容器中.
default.conf
nginx 的默认配置文件
server {
listen 80;
access_log /var/log/nginx/host.access.log;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#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;
}
}
Dockerfile
Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明.
FROM nginx:1.15
COPY dist/ /usr/share/nginx/html/
ADD default.conf /etc/nginx/conf.d/
WORKDIR /usr/share/nginx/html
RUN chmod -R a+rx *
docker-compose.yml
docker compose 的配置文件
docker compose 是 docker 提供的一个命令行工具,用来定义和运行由多个容器组成的应用.
version: "2"
services:
myapp:
build:
context: .
dockerfile: Dockerfile
# 镜像名称
image: vue:1.0.0
ports:
- 5000:80
restart: always
# 容器名称
container_name: "myapp"
执行命令
# 构建命令
docker-compose up --force-recreate --build -d
第二种
使用 nodejs 镜像的构建,构建后再放入nginx容器中.
default.conf
Dockerfile
FROM node AS builder
WORKDIR /app
COPY . /app
RUN npm i && npm run build
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
ADD default.conf /etc/nginx/conf.d/
EXPOSE 80
WORKDIR /usr/share/nginx/html
RUN chmod -R a+rx *