在Docker中使用Nginx部署Vue项目

---

一、前置需求

1.liunx环境

本人用的 Centos7

2.安装Docker

参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/124237932

3.安装docker-compose

参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/125425947

---

二、部署方法

1.打包Vue项目

npm run build 

打包好之后项目下会有一个dist文件夹

2.Docker拉取Nginx镜像

docker pull nginx

3.创建一个打包镜像的目录

创建一个文件夹，把之后需要打包镜像的文件全部放里面，我这里直接在根目录下创建了一个VueProjects文件夹

cd /
mkdir VueProjects

进入 VueProjects 文件夹

cd VueProjects

4.上传Vue项目

将打包好的Vue项目【dist文件夹】上传到 VueProjects 目录中

5.编写Nginx配置文件

vim default.conf

内容如下

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

ps：
listen：端口
server_name：ip
root：Nginx根目录 /usr/share/nginx/html
index：主页文件名

6.编写Dockerfile

vim Dockerfile

内容如下

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

ps：
FROM ：指定基础镜像
MAINTAINER ：指定作者
RUN ：删除基础镜像中的 Nginx 配置文件
ADD ：配置文件替换成自己写的
COPY ：打包好的 Vue 项目复制到基础镜像中 Nginx 的指定路径下

到此为止 VueProjects 目录下有两个文件一个目录

7.编写docker-compose.yml

vim docker-compose.yml

内容如下

version: '3.5'

services:
  mysite:
    image: distribute-search/front-gjhj-image:0.0.1
    container_name: front-gjhj-container
    build: ./
    restart: always
    ports:
      - "80:80"

ps：
version: ‘3.5’ ：指定当前的 compose 版本【compose 版本可以通过 docker-compose --version 命令查看】
services ：指定部署哪些服务
mysite ：如果不指定下面的 image 参数的话，打包后的镜像名会以 当前文件夹名+下划线+你配置的名称 组合，作为你的镜像名【比如：此处我如果没指定下面的 image 参数的话，我的镜像名就是 文件夹名+下划线+配置名 == mysite_mysite】如果指定了 image 参数的话，那么这里的名字可以随便写，相当于站位符，没啥用了
image: distribute-search/front-gjhj-image:0.0.1 ：指定镜像名为 distribute-search/front-gjhj-image 版本号为 0.0.1
container_name: front-gjhj-container ：指定启动后的容器名为 front-gjhj-container
build ./ ：在当前路径下找 Dockerfile 文件
restart: always ：开机自启
ports ：端口映射

8.打包镜像并启动容器

docker-compose up -d

ps：
-d：守护进程运行

---

三、访问测试

直接访问不到，如果你也这样的话，就依次输入下面的命令

vim /etc/sysctl.conf

#配置转发
net.ipv4.ip_forward=1

#重启服务，让配置生效
systemctl restart network

可以输入 sysctl net.ipv4.ip_forward 命令看下配置是否生效

net.ipv4.ip_forward 变成1就可以了

再次访问页面就正常显示了