Dva+antd项目部署至Nginx服务器

前言

dva是在现有的应用架构进行了轻量级封装，相比于redux更易上手。如需了解更多请参考这里
项目中运用的技术架构是react+dva+antd，完成之后需要将应用部署到服务器上，需要一台服务器，仅以Nginx为例，记录整个的部署流程。

部署前准备

在完成你的dva项目之后，从coding或者你的git服务器上克隆项目到本地

$ git clone 你的dva项目
$ cd project
$ npm install

成功下载完所有配置文件之后执行，再次确认你的项目可以正确访问

$ npm start

即可自动打开浏览器的8000端口，成功运行该项目，如果没有自动弹出则访问localhost:8000/

部署配置

在项目中的.roadhogrc文件中删除以下配置

"proxy": {
  "/api": {
  "target": 你的后台服务地址,
  "changeOrigin": true,
  "pathRewrite": { "^/api" : "" }
  }
}

之后进入命令行，执行编译操作

$ npm run build

执行完之后会在主目录下生成dist文件夹，里面包含index.html、index.js、index.css以及资源文件夹static。
打包完成后，把dist文件夹上传至服务器上即可访问，这里用的是nginx服务器。

nginx简介

Nginx（发音同 engine x）是一款轻量级的Web 服务器／反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。

本项目采用 Nginx 作为 Web 服务器。

安装nginx

由于服务器是ubuntu系统，这里仅展示在ubuntu系统下安装过程，其他操作系统可自行查找

登录服务器之后执行，下载nginx安装包

$ sudo wget http://nginx.org/download/nginx-1.2.2.tar.gz

然后解压

$ sudo  tar -xzvf nginx-1.2.2.tar.gz

进入解压之后的文件夹

$ cd nginx-1.2.2
$ ./configure

如果一切顺利的话，执行

$ make
$ make install

完成安装，可以在/usr/local文件下找到nginx文件夹

然后访问服务器即可看到

welcome nginx

nginx安装常见问题

• 缺少pcre

  执行./configure之后，出现

  ./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the module by using --without-http_rewrite_module option, or install the PCRE library into the system, or build the PCRE library statically from the source with nginx by using --with-pcre= option.
  

  即提示缺少pcre library

  $ sudo apt-get undate
  $ sudo apt-get install libpcre3 libpcre3-dev
  

• 缺少gcc-c++和libtool

  执行./configure之后，出现

  libtool: compile: unrecognized option `-DHAVE_CONFIG_H'
  libtool: compile: Try `libtool --help' for more information.
  make[1]: *** [pcrecpp.lo] Error 1
  make[1]: Leaving directory `/usr/local/src//pcre-8.31'
  make: *** [all] Error 2root@wolfdog-virtual-machine:~/work/pcre-8.12$ libtool -help -DHAVE_CONFIG_H
  The program 'libtool' is currently not installed.  You can install it by typing:
  sudo apt-get install libtool
  

  即提示缺少libtool和gcc-c++

  $ sudo apt-get install libtool
  $ sudo apt-get install gcc-c++
  

• 缺少zlib库

  执行./configure之后，出现

  ./configure: error: the HTTP gzip module requires the zlib library.
  You can either disable the module by using --without-http_gzip_module
  option, or install the zlib library into the system, or build the zlib library
  statically from the source with nginx by using --with-zlib= option.
  

  其提示缺少zlib库

  $ sudo apt-get install openssl libssl-dev libperl-dev
  

nginx配置

nginx的配置文件在/usr/local/nginx/conf文件夹下，其主要的配置文件是nginx.conf文件，编辑该文件

$ vi nginx.conf

在配置文件的http下写入如下配置

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header HOST $http_host;
           proxy_set_header X-Nginx_Proxy true;
           proxy_redirect off;
           root  dist;
           index  index.html index.htm;
           try_files $uri /index.html;
        }

        location ^~ /api/ {
          proxy_set_header  X-Real-IP  $remote_addr;
          proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_read_timeout       300;
          proxy_send_timeout       600;
          proxy_ignore_client_abort on;
          proxy_connect_timeout    300;
          proxy_next_upstream     error;
          proxy_pass 这里填入后台服务地址;
       }

之后用scp命令将本地的dist文件夹上传至服务器的/usr/local/nginx文件夹下即可，上传成功之后启动nginx

$ /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

成功之后访问服务器即可看到项目首页