使用nginx部署vue项目

一、安装nginx

容器化技术是现在的一大热门，所以为了学习容器化工具，选择使用docker-compose来安装nginx。

1、docker-compose安装nginx

关于docker及docker-compose的安装，可参考另一篇文章
docker-compose部署es集群并设置密码
也可以直接参考官网进行安装
docker官网

创建nginx目录

mkdir -p /home/nginx/conf
mkdir -p /home/nginx/conf.d
mkdir -p /home/nginx/html
mkdir -p /home/nginx/logs

docker-compose配置文件

nginx.yml

version: '3.9' # docker-compose当前最新版本
services: 
  nginx: 
    restart: always 
    image: nginx # 镜像，可指定版本，比如nginx:版本号
    container_name: nginx # 容器名
    ports:
      - 80:80
      - 443:443
    volumes: # 宿主机与容器路径映射
      - /home/nginx/conf:/etc/nginx/conf # 存放nginx.conf
      - /home/nginx/log:/var/log/nginx # 日志
      - /home/nginx/conf.d:/etc/nginx/conf.d # server配置
      - /home/nginx/html:/usr/share/nginx/html # 项目

nginx配置文件

nginx.conf（参考的菜鸟教程进行配置的）

########### 每个指令必须有分号结束。#################
user nobody;  #配置用户或者组，默认为nobody nobody。
worker_processes 2;  #允许生成的进程数，默认为1
pid /var/run/nginx.pid;   #指定nginx进程运行文件存放地址
error_log /var/log/nginx/error.log info;  #制定日志路径，级别。这个设置可以放入全局块
，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg
events {
    accept_mutex on;   #设置网路连接序列化，防止惊群现象发生，默认为on
    multi_accept on;  #设置一个进程是否同时接受多个网络连接，默认为off
    #use epoll;      #事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大连接数，默认为512
}
http {
    include       /etc/nginx/mime.types;   #文件扩展名与文件类型映射表
    default_type  application/octet-stream; #默认文件类型，默认为text/plain
    #access_log off; #取消服务日志    
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定义格式
    access_log /var/log/nginx/access.log myFormat;  #combined为日志格式的默认值
    sendfile on;   #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。
    sendfile_max_chunk 100k;  #每个进程每次调用传输数量不能大于设定的值，默认为0，即>不设上限。
    keepalive_timeout 65;  #连接超时时间，默认为75s，可以在http，server，location块。

    include /etc/nginx/conf.d/*.conf
}

注意：这里面配置的路径全是宿主机的映射路径

default.conf

server {
    listen       80;
    server_name  127.0.0.1;

    # 拦截 /
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

2、启动nginx

cd /home/nginx
docker-compose -f nginx.yml up -d #初次启动
# 几个常用的docker命令
docker start nginx #启动
docker restart nginx #重启
docker stop nginx #停止
docker rm nginx #删除
docker logs -f nginx #查看日志
docker exec -it nginx /bin/bash #进入容器

3、项目打包

默认已经安装node.js

npm run build

将打好的文件夹（如果没改动一般是dist文件夹），上传到服务器/home/nginx/html目录中（这个路径和配置的路径最好一致）。

4、nginx部署

上传好之后，修改default.conf配置文件

server {
   listen       80;
    server_name  服务器IP;

    # 拦截 /vueProject
    location /vueProject {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

注意：
将dist目录改为vueProject，不然会找不到文件。
因为使用nginx访问静态资源时，路径名要和实际路径名匹配（root路径+location路径，意思是nginx是按照/usr/share/nginx/html/vueProject这个路径去寻找资源）
自己在部署时，就因为这里没改，一直显示404，找不到文件。

以上操作弄好之后，重启nginx，就能访问vue项目了