docker+nginx部署项目

1.安装docker

• 通过终端使用ssh命令进入服务器。

ssh @root服务器Ip 
然后输入密码进入

• 安装docker

# step 1: 安装必要的一些系统工具
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
# Step 2: 添加软件源信息
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# Step 3: 更新并安装 Docker-CE
sudo yum makecache fast
sudo yum -y install docker-ce

# 检验是否安装完成
docker --version

2.在服务器的docker上配置nginx

• 获取镜像

docker pull nginx

• 检验nginx是否可用

docker run -d --name myapp -p 9001:80 nginx

# 9001是服务器访问端口
# 80是映射的nginx端口
# 通过服务器Ip:9001，可以访问到nginx网页，即为成功

3.安装node环境

### 安装node

sudo yum install nodejs

4.把代码传到gitee上

• 在服务器上切换目录到wwwroot目录下
• 通过 sudo yum install git 下载git工具
• 拉取代码到wwwroot文件下
• npm i 下载依赖
• npm build 生成dist目录

5.nginx配置文件

在wwwroot目录下
mkdir conf.d  新建一个目录
cd conf.d 
touch default.conf 新建一个文件


### 以下代码粘贴到文件中
server{
        # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
    listen       80;
    # 服务名称，无所谓
    server_name  localhost;

    # 上述端口指向的根目录
    root /usr/share/nginx/html/dist;
    # 项目根目录中指向项目首页

    charset utf-8;
    client_max_body_size 20m;
    client_body_buffer_size 128k;

    # 根请求会指向的页面
    location / {
      # 请求指向的首页
      index index.html;
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ /index.html;
    }
    location /api {
      proxy_pass http://192.168.3.176:3000;
      rewrite  ^/api/(.*)$ /$1 break;
    }

    # location /bigData/image {
    #     alias /home/lighthouse/wwwroot/intelligent-sanitation-system/dist/bigData/image/;
    #     allow all;
    #     autoindex on;
    #     charset utf-8;
    # }

    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
}




### 最后，映射
docker run -id --name vue3_nginx -p 81:80 -v $PWD/conf.d:/etc/nginx/conf.d  -v $PWD/vue3_project/dist:/usr/share/nginx/html/dist nginx

$PWD代表当前所在目录，81：服务器访问端口，80：nginx内部映射端口。