博客记录点滴

Vue 项目部署

1. 项目打包

# 生成 dist 目录
npm run build

拉取镜像

docker pull nginx:1.17.8

创建 default.conf


server {
    listen       80;
    server_name  localhost;
    # charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

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

    # api 接口代理
    location /api {
        proxy_pass http://localhost:3000;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

创建 Dockerfile

# 基础镜像
FROM nginx:1.17.8
# 拷贝文件
COPY ./dist /usr/share/nginx/html
# 拷贝配置文件
COPY ./default.conf /etc/nginx/conf.d/default.conf

创建镜像

docker build -t vue-app:1.0 .

# 查看镜像命令
docker images ls | grep vue-app

运行容器

docker run -d -p 8080:80 vue-app:1.0

# 查看运行的容器id
docker ps -a | grep vue-app

部署 node 项目

创建 Dockerfile

FROM node:latest
# 创建项目目录
RUN mkdir -p /usr/src/app

# 拷贝文件
COPY db /usr/src/app/db
COPY app.js /usr/src/app
COPY package.json /usr/src/app/package.json
COPY msyql.js /usr/src/app/mysql.js

# 设置工作目录
WORKDIR /usr/src/app

# 安装依赖
RUN npm install

# 暴露端口
EXPOSE 3000

# 启动项目
CMD ["npm", "start"]

构建镜像

docker build -t node-app:1.0 .

运行容器

docker run -d -p 3000:3000 node-app:1.0
# docker ps -a | grep node-app   可以查看运行的容器id

参考资料