diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 000000000..0376eddeb --- /dev/null +++ b/.dockerignore @@ -0,0 +1,21 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local +.eslintcache +report.html + +yarn.lock +npm-debug.log* +.pnpm-error.log* +.pnpm-debug.log +tests/**/coverage/ + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +tsconfig.tsbuildinfo diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..5163975dd --- /dev/null +++ b/Dockerfile @@ -0,0 +1,20 @@ +FROM node:16-alpine as build-stage + +WORKDIR /app +RUN corepack enable +RUN corepack prepare pnpm@7.32.1 --activate + +RUN npm config set registry https://registry.npmmirror.com + +COPY .npmrc package.json pnpm-lock.yaml ./ +RUN pnpm install --frozen-lockfile + +COPY . . +RUN pnpm build + +FROM nginx:stable-alpine as production-stage + +COPY --from=build-stage /app/dist /usr/share/nginx/html +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/README.en-US.md b/README.en-US.md index 44985af71..e9d63767a 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -90,6 +90,28 @@ pnpm serve pnpm build ``` +## Docker support + +1. Customize the image named `vue-pure-admin` (please note that there is a dot `.` at the end of the command below, indicating that the `Dockerfile` file in the current path is used, and the path can be specified according to the actual situation) + +```bash +docker build -t vue-pure-admin . +``` + +2. Port mapping and start the `docker` container (`8080:80`: indicates that the `80` port is used in the container, and the port is forwarded to the `8080` port of the host; `pure-admin`: indicates a custom container name; `vue-pure-admin`: indicates the custom image name) + +```bash +docker run -dp 8080:80 --name pure-admin vue-pure-admin +``` + +After operating the above two commands, open `http://localhost:8080` in the browser to preview + +Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below + +

+ docker +

+ ## Change Log [CHANGELOG](./CHANGELOG.en_US.md) diff --git a/README.md b/README.md index c712c0cf0..48d0b29ad 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,28 @@ pnpm serve pnpm build ``` +## Docker 支持 + +1. 自定义镜像名为 `vue-pure-admin` 的镜像(请注意下面命令末尾有一个点 `.` 表示使用当前路径下的 `Dockerfile` 文件,可根据实际情况指定路径) + +```bash +docker build -t vue-pure-admin . +``` + +2. 端口映射并启动 `docker` 容器(`8080:80`:表示在容器中使用 `80` 端口,并将该端口转发到主机的 `8080` 端口;`pure-admin`:表示自定义容器名;`vue-pure-admin`:表示自定义镜像名) + +```bash +docker run -dp 8080:80 --name pure-admin vue-pure-admin +``` + +操作完上面两个命令后,在浏览器打开 `http://localhost:8080` 即可预览 + +当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目,如下图 + +

+ docker +

+ ## 更新日志 [CHANGELOG](./CHANGELOG.zh_CN.md)