Linux安装nginx及部署vue项目

一时失言乱红尘 2023-02-21 06:53 88阅读 0赞

### 目录 ###

*  一、下载nginx
 *  二、用xshell连接服务器
 *   *  1、创建nginx目录：\`mkdir nginx\`
     *  2、\`cd nginx\`
     *  3、配置nginx安装所需的环境
     *  4、打开Xftp传入压缩包
     *  5、解压缩
     *  6、进入加压文件
     *  7、编译安装nginx
     *  8、启动nginx
     *  9、设置nginx开机启动
 *  三、部署
 *   *  1、打开vue项目，在控制台输入
     *  2、在xshell进入nginx/html目录，打开xftp
     *  3、把生成的dist目录下的静态资源传输到服务器
     *  4、修改配置文件
     *  5、开放 8080 端口
     *  6、在服务器也要开放端口
     *  7、重启nginx

# 一、下载nginx #

官网：[http://nginx.org/en/download.html][http_nginx.org_en_download.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

# 二、用xshell连接服务器 #

## 1、创建nginx目录：`mkdir nginx` ##

## 2、`cd nginx` ##

## 3、配置nginx安装所需的环境 ##

yum install gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

## 4、打开Xftp传入压缩包 ##

![在这里插入图片描述][20200629171734169.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

## 5、解压缩 ##

tar -zxvf nginx-1.19.0.tar.gz

## 6、进入加压文件 ##

解压之后，进入加压文件，即`cd nginx-1.19.0`  
然后进行配置，推荐使用默认配置，直接`./configure` 就好了，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

## 7、编译安装nginx ##

首先在当前目录（/usr/local/nginx-1.19.0）进行编译。输入make即可：

make

然后回车，如果编译出错，请检查是否前面的4个安装都没有问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]  
编译成功之后，就可以安装了，输入以下指令：

make install

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

## 8、启动nginx ##

进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx

./nginx

如果启动报错：nginx: \[emerg\] bind() to 0.0.0.0:80 failed (98: Address already in use)，说明80端口被占用，使用如下命令：

fuser -k 80/tcp

关闭nginx

./nginx -s quit  或者 ./nginx -s stop

重启nginx

./nginx -s reload

查看nginx进程

ps aux|grep nginx

## 9、设置nginx开机启动 ##

只需在rc.local增加启动代码即可。

vim /etc/rc.local

按键盘 i 然后在底部增加：

/usr/local/nginx/sbin/nginx

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

# 三、部署 #

## 1、打开vue项目，在控制台输入 ##

npm run build

## 2、在xshell进入nginx/html目录，打开xftp ##

先删除原来的index.html,再传输

## 3、把生成的dist目录下的静态资源传输到服务器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]

## 4、修改配置文件 ##

此外，进入`cd /usr/local/nginx/conf`目录可修改nginx的配置文件：

vim nginx.conf

按键盘`i`进行编辑，编辑完成按 Esc,再输入 `:wq`

贴上一个完整版的，其中有序号标明的是注释说明，主要更改了server 的内容

#user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events { 
        worker_connections  1024;
    }
    
    
    http { 
        include       mime.types;
        default_type  application/octet-stream;
    
        #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  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server { 
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server { 
            # 1、8080是需要监听的端口
            listen       8080;
            
            # 2、47.115.5.93是你部署的ip
            server_name 47.115.5.93;
            
            # 3、root后面的是前端打包后的传输到服务器的路径
            root /usr/local/nginx/html;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
    
    
            location / { 
               # root   /usr/local/nginx/html/;
     
               # 4、加这一行官方说可以解决刷新后404的问题
                try_files $uri $uri/ /index.html;
                
               # 5、这里配置默认到index.html
                index  index.html index.htm;
            }
    
            # 6、这里是解决跨域问题，将你后端的地址写在proxy_pass 后面就可以了
            location /api {    
                # 下面这行也要改为api   
                rewrite ^.+api/?(.*)$ /$1 break;
                proxy_pass http://47.107.158.11/PInn;
                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;
            }
    
            # 7、如果有多个后端服务器，可继续添加如下的location
            location /req { 
                rewrite ^.+req/?(.*)$ /$1 break;
                proxy_pass http://47.115.12.243;
                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;
    
            }
    
    
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html { 
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ { 
            #    proxy_pass   http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ { 
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht { 
            #    deny  all;
            #}
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server { 
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;
    
        #    location / { 
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    
        # HTTPS server
        #
        #server { 
        #    listen       443 ssl;
        #    server_name  localhost;
    
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;
    
        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;
    
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;
    
        #    location / { 
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    }

说明：如果需要配置多个vue项目，只需添加多个server配置即可。

把nginx下面的另外一个server的注释取消，再进行修改配置即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

## 5、开放 8080 端口 ##

1、检查防火墙状态

firewall-cmd --state

running 表示防火墙是开启的，如果你看到的是 not running，则表示防火墙关闭，需要开启 ：

systemctl start firewalld.service

2、开放 8080 端口

firewall-cmd --zone=public --add-port=8080/tcp --permanent

3、重启防火墙

systemctl restart firewalld.service

4、重新载入配置

firewall-cmd --reload

## 6、在服务器也要开放端口 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]

## 7、重启nginx ##

在`/nginx/sbin/`目录下

重启：

./nginx -s reload

查看nginx进程：

ps aux|grep nginx

[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629171421675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[20200629171734169.png]: https://img-blog.csdnimg.cn/20200629171734169.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629171755392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200629172710996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200629173014725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200629173041570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200629175727458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200629181125995.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200730202213974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200730201829999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70