Merge pull request #21 from gimse/main

Dockerfile that Builds for Produduction

Dockerfile

@@ -1,20 +1,26 @@
-# Use node:alpine3.17 image as the base image
+# Use node as the builder image
-FROM docker.io/node:alpine3.17
+FROM docker.io/node:alpine3.17 as builder
-
-# Maintainer information
-MAINTAINER tanwenyang@aliyun.com
 
 # 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
+# Building the html code
-CMD yarn dev --host 0.0.0.0
+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

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 即可

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 
+#start server
-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
 ```
+
 Finally, open your browser and access the service's address at http://serverIP:5173