Merge pull request #21 from gimse/main

Dockerfile that Builds for Produduction
This commit is contained in:
LeoKu 2023-11-11 10:29:19 +08:00 committed by GitHub
commit 9c3bd7b62b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 17 deletions

View File

@ -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 the vue-color-avatar file from the local directory to the /app directory inside the container
COPY . /app COPY . /app
# Expose port 5173 of the container and allow external access to this port
EXPOSE 5173
# Change the working directory to /app # Change the working directory to /app
WORKDIR /app WORKDIR /app
# Set the Yarn registry to Taobao mirror and install dependencies using yarn install # 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 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

View File

@ -53,8 +53,9 @@ yarn dev
## Docker 快速部署 ## Docker 快速部署
你可以直接使用我已经构建好的镜像来运行 你可以直接使用我已经构建好的镜像来运行
```sh ```sh
docker run -d -t -p 5173:5173 \ docker run -d -t -p 5173:8080 \
--name=vue-color-avatar \ --name=vue-color-avatar \
--restart=always \ --restart=always \
docker.io/wenyang0/vue-color-avatar:latest docker.io/wenyang0/vue-color-avatar:latest
@ -72,6 +73,7 @@ cd vue-color-avatar/
docker build -t vue-color-avatar:v1 . 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 即可 最后,打开你的浏览器访问服务的地址 http://serverIP:5173 即可

View File

@ -50,8 +50,9 @@ yarn dev
## Docker deploy ## Docker deploy
You can directly run using the image I have already built. You can directly run using the image I have already built.
```sh ```sh
docker run -d -t -p 5173:5173 \ docker run -d -t -p 5173:8080 \
--name=vue-color-avatar \ --name=vue-color-avatar \
--restart=always \ --restart=always \
docker.io/wenyang0/vue-color-avatar:latest 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. Or, you can manually compile it yourself if you prefer.
```sh ```sh
#clone the code #clone the code
git clone https://github.com/Codennnn/vue-color-avatar.git git clone https://github.com/Codennnn/vue-color-avatar.git
#docker build #docker build
cd vue-color-avatar/ cd vue-color-avatar/
docker build -t vue-color-avatar:v1 . 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 Finally, open your browser and access the service's address at http://serverIP:5173