在ubuntu上使用docker部署vue项目

比眉伴天荒 2023-10-13 12:42 16阅读 0赞

**目录**

检查是否安装nginx镜像

项目打包

编写Dockerfile、default.conf

构建镜像

启动容器及挂载

运行访问

--------------------

## 检查是否安装nginx镜像 ##

docker images
    
    
    //若没有nginx镜像就拉取
    docker pull nginx:latest

![c89f715d739f440bb8a24422ff78a33e.png][]

## 项目打包 ##

// 在vue项目中运行
    npm run build

![243359547e904fb0b570033e56f66c01.png][]

build后在项目存放路径中会有个dist文件；

![c5b98c2067e34ac1b6ceb4bd3510d1c9.png][]

复制dist文件到服务器一个空目录下：我的复制到了 /home/docker/ui 路径包下了；

## 编写Dockerfile、default.conf ##

**Dockerfile文件内容如下：**

FROM nginx
    
    RUN rm /etc/nginx/conf.d/default.conf
    
    ADD default.conf /etc/nginx/conf.d/
    
    COPY dist/ /usr/share/nginx/html/

**default.conf文件内容如下：**

server {
        listen       80;
        server_name  localhost; # 修改为docker服务宿主机的ip，可以通过命令 ip addr 查看
    
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }
    	
        # /prod-api/  为后端接口统一前缀	        
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;  # 后端ip地址和端口号
            client_max_body_size 50m;
            sendfile on;
            keepalive_timeout 1800;
        }      	
    
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

把dist、Dockerfile、default.conf文件都放在/home/docker/ui/ 路径下；

![8c8bb172e68944848e9f566507810fa0.png][]

## 构建镜像 ##

构建镜像和使用docker部署后端一样，由于使用的都是docker部署，所以会很方便！

进入到Dockerfile文件所在目录下运行下面命令：

// 一定不要忘记后面的点
    docker build -t [起一个镜像名] .
    
    // docker images 查看镜像是否构建成功

## 启动容器及挂载 ##

**简单的容器启动**

docker run -d -p 8888:80 --name [起一个容器名] [构建镜像时起的镜像名]

**启动容器加挂载配置文件**

docker run -d -p 8888:80 -v /home/docker/ui/:/usr/share/nginx/html/ -v /home/docker/ui/default.conf:/etc/nginx/nginx.conf --name [起一个容器名] [构建镜像时起的镜像名]

## 运行访问 ##

服务器公网ip:8888

[c89f715d739f440bb8a24422ff78a33e.png]: https://img-blog.csdnimg.cn/c89f715d739f440bb8a24422ff78a33e.png
[243359547e904fb0b570033e56f66c01.png]: https://img-blog.csdnimg.cn/243359547e904fb0b570033e56f66c01.png
[c5b98c2067e34ac1b6ceb4bd3510d1c9.png]: https://img-blog.csdnimg.cn/c5b98c2067e34ac1b6ceb4bd3510d1c9.png
[8c8bb172e68944848e9f566507810fa0.png]: https://img-blog.csdnimg.cn/8c8bb172e68944848e9f566507810fa0.png