React 实践项目 (五)
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 就可以访问了.
React 实践项目 (五)的更多相关文章
- React 实践项目 (二)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一 ...
- React 实践项目 (三)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...
- React 实践项目 (一)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 项目代码地址:https: ...
- python实践项目五:操作剪贴板-pyperclip模块
描述:读取剪贴板的内容,修改该内容,再将修改后的内容重新写进剪贴板 注意:执行程序代码前需保证剪贴板有内容,可复制以下内容来测试: Lists of animals Lists of aquarium ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- Xamarin.Android开发实践(五)
原文:Xamarin.Android开发实践(五) 一.服务的生命周期 服务与活动一样,在它的整个生命周期中存在着一些事件,下图可以很好解释整个过程以及涉及到的方法: 在真实的使用中,Service来 ...
随机推荐
- 在Caffe添加Python layer详细步骤
本文主要讨论的是在caffe中添加python layer的一般流程,自己设计的test_python_layer.py层只是起到演示作用,没有实际的功能. 1) Python layer 在caff ...
- 我的第一个Java程序
我的第一个Java程序: class Test{ public static void main(String[] args) { System.out.println(" ...
- 关于TAR ZXVF命令解释
分别是四个参数x : 从 tar 包中把文件提取出来z : 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压v : 显示详细信息f xxx.tar.gz : 指定被处理的 ...
- SQLServer类型与Java类型转换问题解决
ResultSet 接口提供用于从当前行获取列值的获取 方法(getBoolean.getLong 等).可以使用列的索引编号或列的名称获取值.一般情况下,使用列索引较为高效.列从 1 开始编号.为了 ...
- elasticSearch(5.3.0)的评分机制的研究
1. ElasticSearch的评分 在用ElasticSearch作为搜索引擎的时候,如果采用关键字进行查询,ElasticSearch会对每个符合查询条件的文档进行评分,在5.3.0的版本中, ...
- Windows Server AppFabric分布式缓存研究
分享一则先前对Windows Server AppFabric分布式缓存的技术研究. 一. AppFabric 技术架构和原理 AppFabric与Memcached类似,采用C/S的模式,在 ser ...
- python 解析nginx 日志 url
>>> import os>>> os.chdir('e:/')>>> log=open('access.log')//这两行是获取日志流> ...
- 检查服务器是否开启GD库
1.把以下代码复制到记事本中并保存成A.php<?phpOb_end_flush();header ("Content-type: image/png");$im = @im ...
- 实现自己的.NET Core配置Provider之Yaml
YAML是一种更适合人阅读的文件格式,很多大型的项目像Ruby on Rails都选择YAML作为配置文件的格式.如果项目的配置很少,用JSON或YAML没有多大差别.看看rails项目中的配置文件, ...
- [leetcode-312-Burst Balloons]
Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...