Nginx部署前端项目、Vue项目，及常用指令

• • 简介
  • 1. 准备资源文件
  • • • 1.1 打包项目
      • 1.2 拷贝dist资源文件
  • 2. ubuntu安装nginx
  • 3. 编写nginx配置文件
  • • • 3.1 打开配置文件
      • 3.2 配置代理
      • 3.3 检查一下配置文件是否正确
      • 3.4 重新加载配置文件
  • 4 效果
  • • • 4.1 浏览器访问
  • 5. 常用指令

本教程以Ubuntu环境下部署Vue项目为例子

npm run build

拷贝资源文件到ubuntu

上传到服务器

# 切换用户
sudo su root
# 执行安装
apt-get install nginx

/etc/nginx为nignx默认存放配置文件的目录，若其它安装方式，自行找到nginx.conf即可

cd /etc/nginx
ls

• 编辑nginx.conf

gedit nginx.conf

• 复制这里的配置直接覆盖原配置文件

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
 
    server {
        listen       8081;
        server_name  localhost;
        location / {
            root   /home/qiding/lqd/docker/project/web/links-web/dist;
            index  index.html;
        }
    }
}

• root 改为你的资源文件存放路径
• listen 为监听端口

nginx -t

nginx -s reload

浏览器输入你ubuntu的ip+端口

service nginx start          --启动nginx
service nginx restart        --重启nginx
service nginx stop           --停止nginx
nginx -s reload              --重启配置文件
nginx -v                     --查看版本信息
nginx -t                     --查看配置文件所在的目录
nginx -h                     --查看帮助信息
nginx -s stop                --强制停止Nginx服务
nginx -s quit                --优雅地停止Nginx服务（即处理完所有请求后再停止服务）
nginx -?,-h                  --打开帮助信息
killall nginx                --杀死所有nginx进程