linux 安装 nginx 以及部署 vue 到服务器

疯狂的小老鼠

已于 2023-12-07 15:35:13 修改

阅读量1.5k

点赞数 1

分类专栏：服务器 vue模块文章标签： vue.js

于 2022-11-14 15:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_42040328/article/details/127706353

版权

vue模块同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

服务器

1 篇文章 0 订阅

订阅专栏

linux 安装 nginx 以及部署 vue 到服务器

Linux环境下Nginx服务器

先查看Linux服务器下有没有安装：GCC、automake、pcre、zlib和openssl

如果安装后会显示各自的版本号

    //查看openssl
    rpm -qa openssl
    
    //查看zlib
    rpm -qa zlib
    
    //查看pcre
    rpm -qa pcre

如果没有安装以上三个库, 可以使用一下命令安装

    yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel

下载Nginx 并解压

通过官网下载，http://nginx.org/en/doload.html 可以选择对应的版本下载
通过Linux 命令下载 wget http://nginx.org/download/nginx-1.16.1.tar.gz

    // 进入 opt 文件
    cd /opt
    // 创建nginx 文件夹下载 nginx
    wget http://nginx.org/download/nginx-1.16.1.tar.gz
     
    // 解压文件
    tar -xvf nginx-1.16.1.tar.gz

 解压完之后，nginx 下会多出一个 Nginx-1.16.1
 包含一下文件
 auto：存放了大量脚本文件，和configure脚本程序有关。

 conf：存放了Nginx服务器的配置文件，包含了Nginx服务器的基本配置文件和对部分特性的配置文件。

 configure：Nginx服务器的自动脚本程序，运行configure自动脚本将会完成两项工作：

         1、检查环境，根据环境检查结果生成C代码；

         2、生成编译代码需要的makefile文件。

 html：存放了两个后缀名为.html的静态文件。

 man：存放了Nginx服务器的帮助文档，可通过 man nginx进行查看。

 src：存放了Nginx服务器的所有源代码

安装nginx 服务器
如果安装不成功的话，可能是因为 pcre zlib openssl 未安装成功导致

   // opt/Nginx文件夹下创建新文件夹Nginx-1.16.1_install
   cd /opt/Nginx
   mkdir Nginx-1.16.1_install
   
   //进入之前解压后得到的文件夹nginx-1.16.1
   cd nginx-1.16.1

   //运行configure脚本程序，可以直接运行./configure,也可以通过--prefix=path 指定nginx的安装目录
   ./configure --prefix=/opt/Nginx/Nginx-1.16.1_install
   
   //运行完成后,该文件夹下多出一个文件---Makefile，此时执行make指令进行源代码编译，编译过程中屏幕会有编译全过程
   make
   
   //编译完成后，执行make的install命令安装Nginx服务器
   make install

安装完成之后会在Nginx-1.16.1_install 目录下看到这几个文件
conf：该目录存放了Nginx的所有配置文件，该文件夹下包含nginx.conf文件，它是Nginx服务器的住配置文件，其他文件则是用来配置Nginx的相关功能。

html：该目录存放了Nginx服务器在运行过程中调用的一些html文件。

logs：该目录存放了Nginx服务器的日志。

sbin：该目录中只包含了一个文件-nginx，它就是Nginx服务器的主程序

修改nginx.conf 这个文件并启动nginx

我们可以通过命令修改

    // 修改nginx.conf文件中端口，如修改成81
    cd /opt/Nginx/Nginx-1.16.1_install/conf
    vim nginx.
    // 以下是要改文件下的内容
    server {
        listen       80; // 默认监听端口为 80, 可自行更改
        server_name  localhost; // 默认监听地址为 localhost, 可自行更改

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/vue;// 此是你vue npm run build 打包后放置静态文件dist的路径
            index  index.html index.htm;
            autoindex on; // 开启nginx目录浏览功能
            autoindex_exact_size off; // 文件大小从KB开始显示
            charset utf-8;  // 显示中文
            // 跨域配置
            add_header 'Access-Control-Allow-Origin' '*';
            add_header Access-Control-Allow-Credentials true;
        }
    }

通过软件 Xftp 修改
可以借鉴一下这个作者写的：https://blog.csdn.net/weixin_44953395/article/details/112900516
启动 nginx

    //在文件下/opt/Nginx/Nginx-1.16.1_install/sbin 输入命令启动
    ./nginx
    // 访问的话，通过ip 访问就行

通过服务器IP就可以访问了

nginx 的一些命令操作

停止nginx


    // 1. 等nginx 处理完任务停止
    ./nginx -s quit

    // 2. 先查出nginx 进程id 再使用 kill 命令强制杀掉进程-->
    ./nginx -s stop 


    // 输入命令：查看进程号
    ps aux|grep nginx

    // 杀死进程: 
    kill -term xxxx/ kill -int xxxx
    // [root@localhost ~]# kill -term 进程编号
    // [root@localhost ~]# kill -int 进程编号

强制停止： pkill -9 nginx

    [root@localhost ~]# pkill -9 nginx

重启nginx

    // 先将nginx 给停止，然后再重启
    ./nginx -s quit
    ./nginx
    // 如果我们需要重新加载配置文件，对 nginx.conf 修改后，要想让配置生效需要重启 nginx，使用-s reload不用先停止 nginx 就可以再启动 nginx 即可将配置信息在 nginx 中生效
    ./nginx -s reload

nginx 代理 vue

nginx 代理 vue

vue打包后,因为开发环境设置代理 proxy 的原因, 使得访问打包页面请求不同ip数据时出现了跨域问题。
nginx代理vue的意义: 在于把开发环境中的代理 proxy: {‘/api’: … 的/api, 换成生产环境中的地址即在服务器里面nginx的代理

    // /api/ 为vue中代理的值；
    //  proxy_pass 需要代理的ip地址
    location /api/ { 
        rewrite  ^.+api/?(.*)$ /$1 break;   // 重定向
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 可省略结束
        # 必填
        proxy_pass  http://192.168.1.10:8888/;    #node api server 即需要代理的IP地址
    }

遇到问题：Nginx 403 forbidden 错误的原因及解决方法

在这里插入图片描述

产生原因：由于启动用户和nginx的工作用户不一致所致

确认原因:

查看启动的用户是：nginx/root 启动

    // 输入命令：查看进程号
    ps aux|grep nginx

如下图所示
在这里插入图片描述

修复问题：可以在文件内改，也可以通过命令修改 vim etc/nginx.conf
修改地方：

    # user  nobody; // 将 user  nobody 改为 user root
    worker_processes  1;

注意：如果这里文件有问题也会报 403

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
    }