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 是一个高性能的 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 管理容器.
- 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
文件夹映射到 nginx 容器的
- build
文件夹 这个文件夹就是默认的静态资源文件夹
- /usr/share/nginx/html
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 覆盖默认的配置
- # - ./nginx.conf:/etc/nginx/conf.d/default.conf
- docker - compose down docker - compose up - d
现在我们访问服务器的 80 端口就可以看到我们的应用了. 比如我的服务器 ip 为 139.224.135.86 在浏览器输入 http://139.224.135.86 就可以访问了.
来源: http://www.cnblogs.com/yuicon/p/7258969.html