将vue项目部署在Linux的Nginx下,并设置为局域网内访问

1. 下载
  • wget http://nginx.org/download/nginx-1.12.2.tar.gz

    2. 解压缩
  • tar -zxvf linux-nginx-1.12.2.tar.gz
  • cd nginx-1.12.2/

    3. 执行配置
  • ./configure

    4. 编译安装
  • make
  • make install

    5. 启动 nginx
  • /usr/local/nginx/sbin/nginx
  • 访问服务器Ip即可进入welcome to Nginx页面,说明配置成功

    5. 部署vue项目
  • 在idea中自己的vue项目下执行命令:npm run buid,生成dist文件夹,文件夹有两个文件,一个index.html和一个static文件夹,将/usr/local/nginx/html文件夹下的原有两个文件夹删除,并将dist文件夹下的两个文件复制进去。
  • 重启Nginx,/usr/local/nginx/sbin/nginx -s reload
  • 访问服务器ip地址即可进入到自己项目主页

    6. 设置局域网内访问
  • 复制server
    server {
    listen 80;
    server_name localhost ;

      autoindex off;  
    
      location / {  
        index  index.html index.htm index.php;  
        #try_files $uri $uri/ /server.php?/$uri;  
        try_files $uri $uri/ /index.php?$query_string;  
      }  
    
      location ~ \.php(.*)$ {  
          fastcgi_pass   127.0.0.1:9000;  
          fastcgi_index  index.php;  
          fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;  
          fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;  
          fastcgi_param  PATH_INFO  $fastcgi_path_info;  
          fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;  
          include        fastcgi_params;  
      }  
    }
    并将 server_name修改为:服务器Ip地址:80(端口号)
  • 将防火墙设置为开放80端口即可
    1. 开启防火墙: systemctl start firewalld
    2. 开放指定端口:firewall-cmd --zone=public --add-port=80/tcp --permanent
      命令含义: --zong #作用域
      --add-port=80/tcp #添加端口,格式为:端口/通讯协议
      --permanent #永久生效,没有此参数重启后失效
    3. 重启防火墙:firewall-cmd --reload
    4. 在本机浏览器输入 服务器ip:80,即可访问项目主页

你可能感兴趣的:(将vue项目部署在Linux的Nginx下,并设置为局域网内访问)