标签：latest webpack use 执行 系统性能 host 过程 get exp
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 文件已经配置了会把同目录的 build 文件夹映射到nginx容器的/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:/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 就可以访问了.
标签：latest webpack use 执行 系统性能 host 过程 get exp
原文地址：http://www.cnblogs.com/yuicon/p/7258969.html
