Linux服务器前端项目的部署

（步骤来自实际操作，按步骤操作可完成部署）

一、需要先安装nginx

1、下载Nginx

我下载的是这个 nginx-1.24.0.tar.gz

2、安装Nginx依赖

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install gcc-c++

yum install -y openssl openssl-devel

3、解压下载好的Nginx 压缩包

cd 到你放nginx压缩包的位置，解压,这里不需要重命名后再移动到/usr/local,因为还要进行编译

tar -zxvf nginx-1.24.0.tar.gz

cd 到解压完成的目录下，进行nginx的编译安装，依次执行

./configure --with-http_ssl_module

make

make install

过程没有错误就看一下nginx被安装到哪了

whereis nginx

然后cd 到这个目录下 如我的是：/usr/local/nginx

然后进入sbin目录

cd ./sbin

再启动nginx启动文件：

./nginx

然后访问ip:80，看到如下就说明nginx安装成功！

二、部署前端项目

需要进入到nginx的配置文件nginx.conf

我的在：

cd /usr/local/nginx/conf

然后进入编辑配置文件nginx.conf

vim ./nginx

介绍一下nginx的配置文件，深入了解的可以网上查一下，有更加详细的介绍

​

#全局块 ：配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等。
#user  nobody/root; #配置用户或者组，默认为nobody root
user root;
worker_processes  1;  #允许生成的进程数，默认是1
​
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
​
#pid        logs/nginx.pid; #指定nginx进程运行文件存放地址
​
​
events {  #event块：配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。
    accept_mutex on;   #设置网路连接序列化，防止惊群现象发生，默认为on
    multi_accept on;  #设置一个进程是否同时接受多个网络连接，默认为off
    #use epoll;      #事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大连接数，默认为512
}
​
​
http { #http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等。
    include       mime.types; #文件扩展名与文件类型映射表
    default_type  application/octet-stream;  #默认文件类型，默认为text/plain、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;
    #error_page 404 https://www.baidu.com; #错误页
    
    #http全局块
    server {  #server块：配置虚拟主机的相关参数，一个http中可以有多个server。
        keepalive_requests 120; #单连接请求上限次数。
        listen       80; #监听端口
        server_name  127.0.0.1;#监听地址-->设置对应监听的域名xxx.com  www.baidu.com
​
        #charset koi8-r;
​
        #access_log  logs/host.access.log  main;
        
        #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
        location / { #location块：配置请求的路由，以及各种页面的处理情况。
            #root path;  #根目录
            #index vv.txt;  #设置默认页
            root   html;
            index  index.html index.htm;
            #proxy_pass  http://mysvr;  #请求转向mysvr 定义的服务器列表-->可以填写自己的服务器地址
            #proxy_read_timeout 150; 代理连接超时时间
            #deny 127.0.0.1;  #拒绝的ip
            #allow 172.18.5.54; #允许的ip 
        }
​
        #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;
    #    }
    #}
 # 测试配置
    server {
        listen       8777;
        server_name  http://127.0.0.1/;
​
        gzip on; # 开启Gzip
        # gzip_static on; # 开启静态文件压缩 这句话不要
        gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
        gzip_buffers     4 16k;
        gzip_comp_level 5;
        gzip_types     application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; # 进行压缩的文件类型
        gzip_http_version 1.1;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";
​
        location / {
            root   /home/myProject/dist; # root表示根目录，这里的路径需要与Xftp上传的静态资源文件的路径一致
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
​
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }
}

配置每个人都不同，但是有一个前后端分离普通配置：

server {
    listen       80;//这里改成你自己需要监听的端口号，默认80,其他端口号配完记得防火墙要开启对应端口
    //location 后面加什么根据自己的需求加，如/ 就是匹配到http://ip:端口号/ 这个访问路径 
    server_name  localhost;//这个不改也可以，改也可以写你的ip或者域名
    location / {
        root   /usr/local/nginx/html/static; //设置这个访问路径的根目录，
        index  index.html index.htm //在这个根目录下去寻找index.html
                                    //index 表示访问这个地址的首页
    }
​
    location /api/{//这个需要与后端约定好，请求接口要怎么发，一般为/api/  标识这个请求是请求后端接口的
        proxy_pass   http://localhost:8080/;   //写你后端服务的访问路径
        //!!!!!!!!!!!!!!!!注意!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        //需要注意的是，写 http://localhost:8080/ 与 http://localhost:8080 这两个转发到后端是不一样的
        //如请求后端的/login 接口
        // 前端发起http://localhost:8080/api/login
        // 第一种端口后面带 / 的转发到后端是 http://localhost:8080/login
        //而第二种端口后面不带 / 的转发到后端是 http://localhost:8080/api/login 如果是这个，后端的接口就应该配为/api/login,而不是直接/login
     }
​
​
}

最后一步

就是将你的前端静态资源拷到你配置的目录下，比如我的就是/usr/local/nginx/html/static

那么就把静态资源拷到这里，并且static目录下面就有index.html

然后ip:端口号就可以默认访问到index.html 了，访问成功就说明前端项目部署完成！！！！