React 在网络上拥有近 70,000 颗星，是目前最流行的前端框架。而我学习React也有一段时间了，现在开≡始使用React+Redux进行实战！

React实践项目（一）

React实践项目（二）

React实践项目（三）

React实践项目（四）

React实践项目（五）

这次我们将应用程序部署到服务器。

项目虽小，五脏俱全，但为了提高我们写代码的积极性，自然而然地♂选择部署在服务器上，在朋友面◥前炫耀一番。部署 React 应用程序也非常方便和简单。

我们使用官方提供的零配置命令行工具-react-app创建项目，该工具内置了打包好的npm命令

在命令行切换到项目目录▂，执行npm run build命令，代码会被编译到build目录下。打包发布整个应用服务器运☉维技术，自动试用压缩优化。

如上图所示，我们的应用已经打包完成。

Nginx 是一个高性＠ 能的 HTTP 和反向代理服务器。

在安装 Nginx 之前，需要引入 .

它是一个开源的应用程序容器引擎，允许开发者将他们的应用程序和依赖包打包♀到一个可移植的容器中服○务器运维技术，然后发布到任何流行的 Linux 机器上，还可以实现虚拟化。容器完︻全使用沙箱机制，它们之间不会有任何接口。

云计算、大数据、移动技术的快速发展，加上企业业务需求的不断变化，导致需要随时改变企业架构以满足业务需求，跟上技术的步伐。更新。毫无疑问，这些负担将落在企业开发者身上；如何在团队之间高效协同，快速交付产品，快速部署应用，满足企业业务需求，是开发者亟待▲解决的问题。技术恰好可以帮助开发者解决这些问题。

为了解决开发人员和运维人员之间的协作关系，加快应用交付，越来越多的企业引入了这个概念。但是在传统的开发流程中，开发、测试、运维是三个独立的团队。团队▓之间沟通不顺畅，开发运维矛盾时有发生，导致协作效率低下，产品交付延迟。企业的业务运作。该技↘术以容器的形式将应用打包交付，使应用可以在不同团队之间共享，通过镜像可以将应用部署在任何环境中。这避免了各个团队之间协〓作问题的出现，成为企业实现目标的重要工具。以容器的形式交付的技术，支持持续的开发迭代，大大提升了产品开发和交付的速度。

另外，不同于虚拟机◣将底层设备虚拟化，它直接移植在Linux内核上，通过运行Linux进程虚拟隔离底层设备，这样对系统↑性能的损耗远低于虚拟机机，几乎可以忽略不计。同时，应用容器的启动和关闭非常高效，可以支持大规模分布式系统的横∩向扩展，这确实给企业发展带来了福音。

简而言之，它∞非常易于使用。它可以安装在linux mac上。安装完成后，我们先下载卐nginx镜像到本地。

拉 nginx

为了方便使用，我们使用 - 来管理◆容器。

version: '2'
services:
  # 服务名称
  nginx:
    # 镜像:版本
    image: nginx:latest 

    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 数据卷 映射本地文件到容器
    volumes:
    # 映射nginx.conf文件⌒到容器的/etc/nginx/conf.d目录并覆盖default.conf文件
    # - ./nginx.conf:/etc/nginx/conf.d/default.conf
    # 映射build文件夹到容器的/usr/share/nginx/html文件夹
     - ./build:/usr/share/nginx/html
    # 覆盖容√器启动后默认执行的命令。
    command: /bin/bash -c "nginx -g 'daemon off;'"

完成㊣　后执行-up -d 会自动创建容器并在后台运行

常用命令：

- down 关闭并删除容器

-ps 查看容器状★态

- exec可用于进入容器执行一些操作，

例如 - exec nginx bash

我们先把打包好的build文件夹上传到服务器，和-.yml放在一起

-.yml文件已配置将∞同目录的build文件夹映射①到nginx容器的/usr/share/nginx/html文件夹。这个文件夹是默认的静态资源文件夹

nginx镜像有一个默认的配置文件.conf

.conf

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;

    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root   /usr/share/nginx/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   /usr/share/nginx/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;
    #}
}

默认Ψ配置有问题。刷新首页以外∴的路由页面时，会报404错误。

我们使用react-作为路由管理，在开发服务器下运行测试性能正常。部署▓到线上nginx服务器后，需要在nginx配置中对应用进行相应的调整，否则浏览器将无法正常刷新。，表现为页面不显示或页面跳∩转错误等异常。原因是这些 React 应用※程序会在运行时更改浏览器 uri，并不真正希望服务器响应这些 uri。如果此时刷新浏览器，服务器会在收到浏览器发送的uri后去寻找资源。这个 uri 服务器上没有对应的资源。结果，服务器向浏览器发送一个 403 错误标志，因为找不到资源。因此，我们需要做〖的调整是：

创建 nginx.conf 文件

# gzip设置
gzip on;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";

#gzip_http_version 1.0;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 其作用是按顺ω　序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如』果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
        try_files $uri /index.html;
    }
    #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   /usr/share/nginx/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;
    #}
}

去掉-.yml中的#-./nginx.conf:/etc/nginx/conf.d/.conf注释，用nginx.conf覆盖默认配置

docker-compose down
docker-compose up -d

现在我们可以通过访问服务器的【80端口来查看我们的应用了。比如我的服务器ip是139.224.135.86，在浏览器中输入就」可以访问。