diff --git a/Dockerfile b/Dockerfile index fe62d98..f72b2eb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,20 +1,26 @@ -# Use node:alpine3.17 image as the base image -FROM docker.io/node:alpine3.17 - -# Maintainer information -MAINTAINER tanwenyang@aliyun.com +# Use node as the builder image +FROM docker.io/node:alpine3.17 as builder # Copy the vue-color-avatar file from the local directory to the /app directory inside the container COPY . /app -# Expose port 5173 of the container and allow external access to this port -EXPOSE 5173 - # Change the working directory to /app WORKDIR /app # Set the Yarn registry to Taobao mirror and install dependencies using yarn install RUN yarn config set registry 'https://registry.npm.taobao.org' && yarn install && yarn cache clean -# Run the command to start the container, which will run the project in development mode and listen on port 5173 of address 0.0.0.0 -CMD yarn dev --host 0.0.0.0 +# Building the html code +RUN yarn build + +# Using nginx for production +FROM docker.io/nginxinc/nginx-unprivileged:1.25.1-alpine + +# Showing that port 8080 can be published +EXPOSE 8080 + +# Maintainer information +MAINTAINER tanwenyang@aliyun.com + +# Copy html from previous stage +COPY --from=builder /app/dist /usr/share/nginx/html diff --git a/README-CN.md b/README-CN.md index dd1c7e4..21a9f00 100644 --- a/README-CN.md +++ b/README-CN.md @@ -53,8 +53,9 @@ yarn dev ## Docker 快速部署 你可以直接使用我已经构建好的镜像来运行 + ```sh -docker run -d -t -p 5173:5173 \ +docker run -d -t -p 5173:8080 \ --name=vue-color-avatar \ --restart=always \ docker.io/wenyang0/vue-color-avatar:latest @@ -72,6 +73,7 @@ cd vue-color-avatar/ docker build -t vue-color-avatar:v1 . #启动服务 -docker run -d -t -p 5173:5173 --name vue-color-avatar --restart=always vue-color-avatar:v1 +docker run -d -t -p 5173:8080 --name vue-color-avatar --restart=always vue-color-avatar:v1 ``` + 最后,打开你的浏览器访问服务的地址 http://serverIP:5173 即可 diff --git a/README.md b/README.md index c2a1414..c55fd5f 100644 --- a/README.md +++ b/README.md @@ -50,8 +50,9 @@ yarn dev ## Docker deploy You can directly run using the image I have already built. + ```sh -docker run -d -t -p 5173:5173 \ +docker run -d -t -p 5173:8080 \ --name=vue-color-avatar \ --restart=always \ docker.io/wenyang0/vue-color-avatar:latest @@ -61,14 +62,15 @@ docker.io/wenyang0/vue-color-avatar:latest Or, you can manually compile it yourself if you prefer. ```sh -#clone the code +#clone the code git clone https://github.com/Codennnn/vue-color-avatar.git -#docker build +#docker build cd vue-color-avatar/ docker build -t vue-color-avatar:v1 . -#start server -docker run -d -t -p 5173:5173 --name vue-color-avatar --restart=always vue-color-avatar:v1 +#start server +docker run -d -t -p 5173:8080 --name vue-color-avatar --restart=always vue-color-avatar:v1 ``` + Finally, open your browser and access the service's address at http://serverIP:5173