From 693dc16c8436a333044ad38e41cf89ff6c8648d0 Mon Sep 17 00:00:00 2001 From: gimse <23360355+gimse@users.noreply.github.com> Date: Thu, 9 Nov 2023 19:22:09 +0100 Subject: [PATCH 1/5] working with nginx on port 8080 --- Dockerfile | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index fe62d98..af636c1 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ # Use node:alpine3.17 image as the base image -FROM docker.io/node:alpine3.17 +FROM docker.io/node:alpine3.17 as builder # Maintainer information MAINTAINER tanwenyang@aliyun.com @@ -16,5 +16,11 @@ 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 + +# Copy html from previous stage +COPY --from=builder /app/dist /usr/share/nginx/html From 58448dbdf2d1af60781f087da6d75e3cd1a2bcc1 Mon Sep 17 00:00:00 2001 From: gimse <23360355+gimse@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:07:04 +0100 Subject: [PATCH 2/5] setting EXPOSE 8080 --- Dockerfile | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index af636c1..35e0b23 100644 --- a/Dockerfile +++ b/Dockerfile @@ -7,9 +7,6 @@ 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 @@ -22,5 +19,8 @@ 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 + # Copy html from previous stage COPY --from=builder /app/dist /usr/share/nginx/html From 760100465f46e826681d18224589a79d6ac37365 Mon Sep 17 00:00:00 2001 From: gimse <23360355+gimse@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:08:04 +0100 Subject: [PATCH 3/5] moving MAINTAINER tanwenyang@aliyun.com --- Dockerfile | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index 35e0b23..c44718f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,6 @@ # Use node:alpine3.17 image as the base image 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 @@ -22,5 +19,8 @@ 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 From aeb4b01212ca93a9d35f3e4bf9e0aa0e04d48935 Mon Sep 17 00:00:00 2001 From: gimse <23360355+gimse@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:09:12 +0100 Subject: [PATCH 4/5] # Use node as the builder image --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index c44718f..f72b2eb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -# Use node:alpine3.17 image as the base image +# 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 From 9d1d09bcd4dad91bda58cca04fe25a231bb27549 Mon Sep 17 00:00:00 2001 From: gimse <23360355+gimse@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:14:55 +0100 Subject: [PATCH 5/5] updating port number to 8080 in readme --- README-CN.md | 6 ++++-- README.md | 12 +++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) 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