简介

现在流行的Web托管服务器是Nginx,虽然最近Nginx的创作者被抓了,但是也不能影响Nginx的成功.

下面介绍下前端代码的一个部署过程

部署

代码编译

  1. npm run build / yarn run build 打包部署文件
  2. 拷贝到服务器上指定文件夹下记住地址,后面映射需要用到.

Nginx安装

  1. 远程进入Linux的机器,使用Xshell或者用自带的命令行工具ssh 账户@IP地址

  2. 开始通过源码编译安装

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    下载软件包,这个版本根据自己的喜爱
    wget http://nginx.org/download/nginx-1.13.6.tar.gz
       
    解压这个nginx的安装包
    tar -zxvf nginx-1.13.6.tar.gz
       
    导航到nginx目录下
    cd nginx-1.10.1 
       
    安装一些需要的包
    yum install -y pcre
    yum install -y pcre-devel
    yum install -y openssl-devel
       
    开始配置
    ./configure  --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/conf/nginx.conf --error-log-path=/var/log/nginx/error.log  --http-log-path=/var/log/nginx/access.log  --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module --with-pcre
       
    编译和安装
    make install
       
    配置环境变量,在文件profile文件中最后加上一行
    vim /etc/profile
    export PATH=$PATH:/usr/local/nginx/sbin
       
    测试是否成功,显示版本号,说明成功了
    nginx -v 
    
  3. 配置Nginx文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    
    #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 {
            listen       80;
            server_name  localhost;
       
            #charset koi8-r;
       
            #access_log  logs/host.access.log  main;
       
            location / {
                root   html;   //這里配置前端编译好的静态文件目录就好了
                index  index.html index.htm;
            }
       
            #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;
        #    }
        #}
       
    }
       
    

Nginx常用命令

  • nginx 启动程序
  • nginx -s stop 停止程序
  • nginx -s reload 重新启动

部署过程中常用的Linux的命令

  • wget xxxxx 下载文件
  • tar -zxvf xxxxx 解压文件
  • cd xxxx 导航到目录下 cd ../ 返回上一层目录
  • rm xxxx 删除文件
  • rm -rf 删除文件下所有的文件 不确认的
  • vim 编辑文本, :wq 是保存

FAQ

  1. 不清楚怎么从windows传输文件到linux

    请参考文章:https://www.7benshu.com/post/2019/12/17-2/

总结

NGINX是目前非常流行的简单的和高性能的Web服务器.