体验在Docker部署vue项目.md

无心

All China Database Union

0次

2024-11-18

5墨值下载

简述

出于个人实验要求，想在Docker中部署一个基于vue的开源项目，但是，我个人并非前端工程师，对前端知识是很欠缺的，于是乎，先做个实验，实验过程如下：首先是，对vue的部署逻辑进行简单梳理，步骤大致如下：

实现步骤

接下来就是跟着这个简单流程做：

1、安装nodejs

下载地址如下：https://nodejs.org/zh-cn，安装过程简单，不会可以网上找一下。

2、创建Vue项目

这里我使用脚手架工具

npm create vite@latest

构建过程如下：

> npx
> create-vite

✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /Users/a18298/data/vue/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

本地运行测试下项目，构建完成时有运行项目的命令

  cd vite-project
  npm install
  npm run dev

npm install

added 47 packages in 7s

5 packages are looking for funding
  run `npm fund` for details
MacBook-Pro:vite-project a18298$ npm run dev

> vite-project@0.0.0 dev
> vite


  VITE v5.4.10  ready in 325 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

根据提示，访问 http://localhost:5173/ 结果如下:

3、项目打包

本地运行没有问题，那么就把项目打包一下；先看下打包前当前目录文件：

-rw-r--r--@  1 a18298  staff    442 11  4 10:41 README.md
-rw-r--r--@  1 a18298  staff    362 11  4 10:41 index.html
drwxr-xr-x@ 37 a18298  staff   1184 11  4 10:44 node_modules
-rw-r--r--@  1 a18298  staff  43128 11  4 10:44 package-lock.json
-rw-r--r--@  1 a18298  staff    385 11  4 10:41 package.json
drwxr-xr-x@  3 a18298  staff     96 11  4 10:41 public
drwxr-xr-x@  8 a18298  staff    256 11  4 10:41 src
-rw-r--r--@  1 a18298  staff    704 11  4 10:41 tsconfig.app.json
-rw-r--r--@  1 a18298  staff    119 11  4 10:41 tsconfig.json
-rw-r--r--@  1 a18298  staff    593 11  4 10:41 tsconfig.node.json
-rw-r--r--@  1 a18298  staff    155 11  4 10:41 vite.config.ts

执行下面命令开始打包:

npm run build

> vite-project@0.0.0 build
> vue-tsc -b && vite build

vite v5.4.10 building for production...
✓ 18 modules transformed.
dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-BXS-EbdD.css   1.27 kB │ gzip:  0.65 kB
dist/assets/index-DBRlKMb9.js   60.93 kB │ gzip: 24.61 kB
✓ built in 301ms

查看打包后的文件目录：

-rw-r--r--@  1 a18298  staff    442 11  4 10:41 README.md
drwxr-xr-x@  5 a18298  staff    160 11  4 10:47 dist
-rw-r--r--@  1 a18298  staff    362 11  4 10:41 index.html
drwxr-xr-x@ 39 a18298  staff   1248 11  4 10:47 node_modules
-rw-r--r--@  1 a18298  staff  43128 11  4 10:44 package-lock.json
-rw-r--r--@  1 a18298  staff    385 11  4 10:41 package.json
drwxr-xr-x@  3 a18298  staff     96 11  4 10:41 public
drwxr-xr-x@  8 a18298  staff    256 11  4 10:41 src
-rw-r--r--@  1 a18298  staff    704 11  4 10:41 tsconfig.app.json
-rw-r--r--@  1 a18298  staff    119 11  4 10:41 tsconfig.json
-rw-r--r--@  1 a18298  staff    593 11  4 10:41 tsconfig.node.json
-rw-r--r--@  1 a18298  staff    155 11  4 10:41 vite.config.ts

对比打包前的文件目录，发现多了一个dist目录，这个就是需要部署到服务器上的内容。

4、部署项目

我是个人体验，所以我没有使用云主机部署，就拿Docker部署感受一下，当然使用docker构建，需要有部署了docker的环境，如安装了docker的虚拟机或者云主机。下面是我部署到Docker的步骤： a、我新建一个vue目录，然后把所有需要的内容都放在这里，看起来像这样：

ll vue/
total 16
-rw-r--r--    1 a18298  staff    132 11  1 17:29 Dockerfile
drwxr-xr-x  649 a18298  staff  20768 11  1 18:21 dist
-rw-r--r--    1 a18298  staff    703 11  1 18:19 nginx.conf

现在说明一下目录里面的文件：第一个Dockerfile文件，是构建Docker镜像的文件，内容如下：

FROM nginx:1.21.1   # 使用nginx镜像
COPY dist/ /usr/share/nginx/html # 把dist目录拷贝到nginx镜像的目录
COPY nginx.conf /etc/nginx/nginx.conf # 使用自己定义的nginx镜像覆盖nginx的配置文件
EXPOSE 80 # 暴露nginx的镜像端口是80
CMD ["nginx","-g","daemon off;"] # 在容器中启动nginx镜像的命令

第二个是打包vue项目生成的文件，放到这里即可。第三个是自定义的nginx配置文件，内容如下：

worker_processes  1;
events {
    worker_connections  100; # 每个工作进程连接数
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
       listen       80;
       server_name  localhost; # 浏览器访问域名

       # 路由
       location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;

            # 新增下面这句，其他是默认nginx配置
            # 解决部分前端框架的路由问题，在浏览器刷新报错404
            try_files $uri $uri/ /index.html;
    }
	    error_page   500 502 503 504  /50x.html;
	    location = /50x.html {
	    root   /usr/share/nginx/html;
	}
   }
}

b、此时构建Docker镜像的准备工作已经做完，开始构建镜像。在创建的vue目录中运行如下命令，构建Docker镜像。

docker build -t myweb:v1.0 .
[+] Building 9.8s (8/8) FINISHED                 docker:desktop-linux
 => [internal] load build definition from Dockerfile             0.0s
 => => transferring dockerfile: 171B                             0.0s
 => [internal] load metadata for docker.io/library/nginx:1.21.1  9.6s
 => [internal] load .dockerignore                                0.0s
 => => transferring context: 2B                                  0.0s
 => [1/3] FROM docker.io/library/nginx:1.21.1@sha256:a05b0cdd4f  0.0s
 => => resolve docker.io/library/nginx:1.21.1@sha256:a05b0cdd4f  0.0s
 => [internal] load build context                                0.1s
 => => transferring context: 117.32kB                            0.1s
 => CACHED [2/3] COPY dist/ /usr/share/nginx/html                0.0s
 => CACHED [3/3] COPY nginx.conf /etc/nginx/nginx.conf           0.0s
 => exporting to image                                           0.0s
 => => exporting layers                                          0.0s
 => => exporting manifest sha256:d25e1cfa3365b1c4fed045eb574bb9  0.0s
 => => exporting config sha256:c9a5e4bf46b39ed79e98fd3294e1d1c3  0.0s
 => => exporting attestation manifest sha256:1c6c64848ddc317430  0.0s
 => => exporting manifest list sha256:eca497bd888f8885a0f4ff036  0.0s
 => => naming to docker.io/library/myweb:v1.0                    0.0s
 => => unpacking to docker.io/library/myweb:v1.0                 0.0s

View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/sm7031c7mrhhh9fv2lp510qcr

What's next:
    View a summary of image vulnerabilities and recommendations → docker scout quickview

查看自己构建的镜像：

docker images|grep myweb
myweb                             v1.0          0ab2918e2eb2   2 days ago     276MB

c、使用构建的镜像创建容器

docker run --name myweb -dp 8080:80 myweb:v1.0
b11916581015de302ab491367c9377f16c13ab41e34a5e8b8e0c2b8cd068b63f

此时，就创建了一个名叫myweb的容器，且访问本地的8080端口就可以访问到容器内部定义的内容，此时访问http://localhost:8080/，出现效果应如下：到处，在容器中部署vue项目完成。原文：https://mp.weixin.qq.com/s/pSiZ_SzXbsMc5BY7b6QdYw

5墨值下载

vue dockerfile

文档被以下合辑收录

四季学kubernetes（共1篇）

记录一个小白自学kubernetes的点滴，向大佬看齐……

简述