mahaaoo
0%

Dva项目部署至Nginx服务器

Posted on Edited on In

前言

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

部署前准备

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

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

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

1
$ npm start

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

部署配置

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

1
2
3
4
5
6
7
"proxy": {
  "/api": {
  "target": 你的后台服务地址,
  "changeOrigin": true,
  "pathRewrite": { "^/api" : "" }
  }
}

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

1
$ 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安装包

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

然后解压

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

进入解压之后的文件夹

1
2
$ cd nginx-1.2.2
$ ./configure

如果一切顺利的话，执行

1
2
$ make
$ make install

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

然后访问服务器即可看到

welcome nginx

nginx安装常见问题

  • 缺少pcre

    执行./configure之后，出现

    1
    ./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=<path> option.

    即提示缺少pcre library

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

  • 缺少gcc-c++和libtool

    执行./configure之后，出现

    1
    2
    3
    4
    5
    6
    7
    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++

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

  • 缺少zlib库

    执行./configure之后，出现

    1
    2
    3
    4
    ./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=<path> option.

    其提示缺少zlib库

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

    nginx配置

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

1
$ vi nginx.conf

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

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
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

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

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