centos7.3安装nginx1.16.1部署vue项目

1、安装nginx,如果没有yum命令的,需要自行安装其环境;

yum install nginx

2、查看nginx是否安装成功
在这里插入图片描述
执行目录:/usr/sbin/nginx
模块所在目录:/usr/lib64/nginx/modules
配置所在目录:/etc/nginx/
默认站点目录:/usr/share/nginx/html

3、把构建好的vue静态文件放到 /usr/local/myproject/dist/文件夹下,没有文件夹,可以自行新建即可,不一定要和我的一样。然后给静态文件夹设置权限 chmod 777
centos7.3安装nginx1.16.1部署vue项目_第1张图片
4、切换到/etc/nginx文件夹,配置nginx文件,vi nginx.conf,切把默认访问文件注释,引入刚刚放置vue项目的文件夹路径,结尾记得加 /,再把顶部user nginx 注销,换成user root,否则报错403
如下:

#user nginx;
user root; #修改启动人和操作者一致
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    log_format  main  '$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  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  39.106.29.92;
        # 注销默认访问路径
       # root         /usr/share/nginx/html 
        include /etc/nginx/default.d/*.conf;
        location / {
         autoindex on;
         alias /usr/local/myproject/dist/;
         index index.html index.htm;        
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

5、关键配置

  location / {
         autoindex on;
         alias /usr/local/myproject/dist/; #我们放置vue项目的文件夹
         index index.html index.htm;        
        }

6、nginx常用命令

   启动: systemctl start nginx.service
   停止:systemctl stop nginx.service
   重载命令: systemctl reload nginx.service
   查看状态: systemctl status nginx.service

你可能感兴趣的:(vue,js,nginx,linux,centos,docker)