Vue3 + TypeScript + vite + Docker + Nginx 搭建

Docker常用命令

www.runoob.com/docker/dock…

下载docker

docs.docker.com/get-docker

下载nginx镜像

docker pull nginx

项目文件配置

在前端开发环境下新建dockerfile和nginx.conf文件

配置文件

dockerfile文件配置
FROM nginx
COPY ./dist/  /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf文件配置
server {
    listen       80;
    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;
    }
}

打包前端项目至dist文件

npm run build

构建镜像

docker build -t mydockerimage .

容器并运行

docker run -d -p 5555:80 mydockerimage

访问地址

http://localhost:5555