资讯专栏INFORMATION COLUMN

React 实践项目 (五)Docker Nginx 部署 React

EscapedDog / 3303人阅读

摘要:在上已经有接近的数了,是目前最热门的前端框架。将整个应用打包发布,自动试用进行压缩与优化。毫无疑问,这些重担都将压在企业开发人员身上团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题。

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战!

React 实践项目 (一)
React 实践项目 (二)
React 实践项目 (三)
React 实践项目 (四)
React 实践项目 (五)

这次我们把应用部署到服务器上.

项目到现在麻雀虽小五脏俱全,为了提高我们写代码的积极性,自然是选择部署到服务器上在小伙伴面前秀一波了.部署 React 应用也是非常方便简单的.

打包应用

我们是用Facebook官方的零配置命令行工具 create-react-app 创建的项目,create-react-app 内置了打包的npm 命令

在命令行里切换到项目目录,执行 npm run build 命令,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化。

如上图所示,我们的应用已经打包完毕.

安装 Nginx

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

在安装Nginx前需要先介绍下 Docker.

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。

云计算、大数据,移动技术的快速发展,加之企业业务需求的不断变化,导致企业架构要随时更改以适合业务需求,跟上技术更新的步伐。毫无疑问,这些重担都将压在企业开发人员身上;团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题。Docker技术恰好可以帮助开发人员解决这些问题。
为了解决开发人员和运维人员之间的协作关系,加快应用交付速度,越来越多的企业引入了DevOps这一概念。但是,传统的开发过程中,开发、测试、运维是三个独立运作的团队,团队之间沟通不畅,开发运维之间冲突时有发生,导致协作效率低下,产品交付延迟, 影响了企业的业务运行。Docker技术将应用以集装箱的方式打包交付,使应用在不同的团队中共享,通过镜像的方式应用可以部署于任何环境中。这样避免了各团队之间的协作问题的出现,成为企业实现DevOps目标的重要工具。以容器方式交付的Docker技术支持不断地开发迭代,大大提升了产品开发和交付速度。
此外,与通过Hypervisor把底层设备虚拟化的虚拟机不同,Docker直接移植于Linux内核之上,通过运行Linux进程将底层设备虚拟隔离,这样系统性能的损耗也要比虚拟机低的多,几乎可以忽略。同时,Docker应用容器的启停非常高效,可以支持大规模的分布系统的水平扩展,真正给企业开发带来福音。

总之就是非常好用, linux windows mac上都可以安装,docker安装完成后我们先把nginx镜像下载到本地.

docker pull nginx

为了使用方便,我们用 docker-compose 管理容器.

创建 docker-compose.yml

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

完成后执行 docker-compose up -d 就会自动创建容器并在后台运行了

常用命令:
docker-compose down 关闭并删除容器
docker-compose ps 查看容器状态
docker-compose exec SERVICE COMMAND 可以用来进入容器内部进行一些操作,
比如 docker-compose exec nginx bash

静态资源配置

我们先把打包好的build文件夹上传至服务器,和docker-compose.yml 放在一起
docker-compose.yml 文件已经配置了会把同目录的 build 文件夹映射到nginx容器的/usr/share/nginx/html文件夹 这个文件夹就是默认的静态资源文件夹

配置 Nginx

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

default.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-router 作为路由管理,在开发端的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置里作相应调整,否则浏览器将不能正常刷新,表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应,如果此时刷新浏览器,服务器收到浏览器发来的uri就去寻找资源,这个uri在服务器上是没有对应资源,结果服务器因找不到资源就发送403错误标志给浏览器。所以,我们要做的调整是:浏览器在使用这个react应用期间,无论uri更改与否,服务器都发回index.html这个页面就行。

创建 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;
    #}
}

将 docker-compose.yml 里的 # - ./nginx.conf:/etc/nginx/conf.d/default.conf 注释去掉 用nginx.conf覆盖默认的配置

docker-compose down
docker-compose up -d

现在我们访问服务器的80端口就可以看到我们的应用了.比如我的服务器ip为 139.224.135.86 在浏览器输入 http://139.224.135.86 就可以访问了.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/39613.html

相关文章

  • React 实践项目Docker Nginx 部署 React

    摘要:在上已经有接近的数了,是目前最热门的前端框架。将整个应用打包发布,自动试用进行压缩与优化。毫无疑问,这些重担都将压在企业开发人员身上团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Red...

    jsyzchen 评论0 收藏0
  • React 实践项目Docker Nginx 部署 React

    摘要:在上已经有接近的数了,是目前最热门的前端框架。将整个应用打包发布,自动试用进行压缩与优化。毫无疑问,这些重担都将压在企业开发人员身上团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Red...

    ephererid 评论0 收藏0
  • React搭建个人博客(二)consul-template+nginx+docker实现负载均衡

    摘要:前两个数据业务相关的服务即下图的,第三个项目就是的实现的负载均衡。这里后台,前台项目各启动了三个实例,用户访问的时候,就会根据配置的负载均衡的策略,访问其中一个。这一部分与之前我转发的实现服务发现及网关其实也只是差了个网关和负载均衡。 一.简介 上一篇只讲了博客的前端问题,这一篇讲一下后端的微服务搭建。项目的后端使用的thinkjs框架,在我之前的博客中已经写过,这里就不重点说明了。后...

    Coding01 评论0 收藏0
  • React搭建个人博客(二)consul-template+nginx+docker实现负载均衡

    摘要:前两个数据业务相关的服务即下图的,第三个项目就是的实现的负载均衡。这里后台,前台项目各启动了三个实例,用户访问的时候,就会根据配置的负载均衡的策略,访问其中一个。这一部分与之前我转发的实现服务发现及网关其实也只是差了个网关和负载均衡。 一.简介 上一篇只讲了博客的前端问题,这一篇讲一下后端的微服务搭建。项目的后端使用的thinkjs框架,在我之前的博客中已经写过,这里就不重点说明了。...

    李增田 评论0 收藏0
  • 我的 2015 年度小结(技术方面)

    摘要:因为路由层面受业务影响很大,经常修改一些功能的行为,所以后来大部分测试都是针对层面的单元测试。在我了解的过程中,我发现中文网络上对的讨论非常分散,于是我创建了中文社区,到年末已经有个注册用户和个帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 从 2014 年末开始开发的一个互联网金融项目终于在今年三月份上线了,这是一个 Node...

    宋华 评论0 收藏0

发表评论

0条评论

EscapedDog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<