# viewer

**Repository Path**: chapo/viewer

## Basic Information

- **Project Name**: viewer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-19
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

容器化(Docker)打包部署
打包配置
根目录新增"nginx.conf"文件
为了解决部分框架部署后的路由问题
如:该开始访问一切正常，但是使用浏览器刷新后，报错404
文件内容如下：

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

        # 新增下面这句，其他是默认nginx配置
        # 解决部分前端框架的路由问题，在浏览器刷新报错404
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
根目录新增"Dockerfile"文件
打包过程分为两个阶段
第一阶段：使用node镜像安装依赖并打包成静态文件
第二阶段：将静态文件放入nginx镜像，并修改配置
文件内容如下：

# 第一阶段：node镜像打包
FROM node:latest AS frontend-builder
WORKDIR /build-app
COPY . .
RUN npm install
RUN npm run build

# 第二阶段：nginx打包
FROM nginx:latest
EXPOSE 80
WORKDIR /app
# 替换nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 将第一阶段的静态文件复制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html

# 运行
CMD ["nginx", "-g", "daemon off;"]
打包部署
使用docker命令打包
镜像名称为"xxc-web:v1"
将镜像上传到docker仓库或私有仓库(Harbor)
运行容器
如下运行命令映射为1234端口，访问 http://localhost:1234

# 打包镜像
docker build -t xxc-web:v1 . 

# 上传仓库
# docker login -u <用户名> -p <密码> <仓库地址>
# docker push xxc-web:v1

# 运行
docker run --name xxc-web -dp 1234:80 xxc-web:v1