真实环境部署我们的React到Nginx容器

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 真实环境部署我们的React到Nginx容器

正文


React 的项目配置以及生产环境部署的问题


1、项目的部署问题


首先是安装的环境:

其次是nginx的配置的问题:

背景:项目中使用了reactreact-router开发,在部署到nginx服务器时遇到了以下问题

History

history

url样例

特点

hash history

/#/user/profile

不需要服务器支持

browser history

/user/profile

react-router官方推荐,需要服务器支持(因为是SPA项目,url切换时需要服务器始终返回index.html


Nginx的配置问题:

以下介绍我们的BrowserHistory模式部署到nginx的基本配置

 

情形一:部署到我们nginx的根目录

访问路径 http://localhost:/

# nginx配置
location / {
    root   html;
    index  index.html;
    # url 切换时始终返回index.html
    try_files $uri /index.html;
}


情形二:部署到nginx的子目录

假设部署到/app目录下,则访问路径 http://localhost:/app/

# nginx配置
location /app {
    root   html;
    index  index.html;
    # url 切换时始终返回index.html
    try_files $uri /app/index.html;
}
# 图片样式缓存1年
location ~* /app.*\.(js|css|png|jpg)$
{
    access_log off;
    expires    365d;
}
# html/xml/json 文件不缓存
location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
{
    expires    -1;
}
// package.json
"homepage": "http://localhost/app",
// react-router路由配置
// 注意指定basename
<BrowserRouter basename='/app'>
</BrowserRouter>


开启nginx的缓存

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

 

整体的配置:

# nginx.conf整体配置大概如下:
http {
    # 开启gzip
    gzip on;
    # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
    gzip_min_length 1k;
    # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
    gzip_comp_level 1;
    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";
    server {
        location /app {
            root   html;
            index  index.html;
            # url 切换时始终返回index.html
            try_files $uri /app/index.html;
        }
        # 图片样式缓存1年
        location ~* /app.*\.(js|css|png|jpg)$
        {
            access_log off;
            expires    365d;
        }
        # html/xml/json 文件不缓存
        location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
        {
            expires    -1;
        }
    }


在服务器上安装部署的环境,并且利用Jenkins实现自动化的部署


第一步,安装部署的基本环境:

安装nodejs以及cnpm并且配置我们的淘宝镜像,并且配置我们的系统变量$PATH:

npm install -g cnpm --registry=https://registry.npm.taobao.org

第一步,在jenkins上面新创建项目,配置我们的git的地址,将代码下拉到我们的服务器的制定文件夹下,之后,我们编写自动化部署的脚本。测试脚本以及配置Jenkins执行我们的脚本。

至此,我们的自动化部署完毕,比较简单的。下面是运行的脚本:

cd /var/lib/jenkins/workspace/test-app
rm -rf /var/lib/jenkins/workspace/test-app/build/*
npm run build

上面的脚本是编译我们的代码的,最后将nginx的root指向我们编译的目标文件即可!

相关文章
|
5天前
|
应用服务中间件 网络安全 nginx
快速上手!使用Docker和Nginx部署Web服务的完美指南
快速上手!使用Docker和Nginx部署Web服务的完美指南
|
5天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
26 0
|
3天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
|
3天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
|
3天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
|
3天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
|
5天前
|
运维 监控 Kubernetes
构建高效自动化运维体系:基于容器技术的持续集成与持续部署(CI/CD)实践
【5月更文挑战第15天】 随着云计算和微服务架构的普及,传统的IT运维模式面临转型压力。为提高软件交付效率并降低运维成本,本文探讨了利用容器技术实现自动化运维的有效策略。重点分析了在持续集成(CI)和持续部署(CD)流程中,容器如何发挥作用,以及它们如何帮助组织实现敏捷性和弹性。通过具体案例研究,文章展示了容器化技术在自动化测试、部署及扩展中的应用,并讨论了其对系统稳定性和安全性的影响。
|
5天前
|
运维 监控 安全
构建高效自动化运维系统:基于容器技术的持续集成与持续部署(CI/CD)实践
【5月更文挑战第14天】 随着DevOps文化的深入人心,持续集成与持续部署(CI/CD)已成为现代软件工程不可或缺的组成部分。本文将探讨如何利用容器技术,尤其是Docker和Kubernetes,构建一个高效、可扩展的自动化运维系统。通过深入分析CI/CD流程的关键组件,我们将讨论如何整合这些组件以实现代码从提交到生产环境的快速、无缝过渡。文章还将涉及监控、日志管理以及安全性策略等运维考量,为读者提供一个全面的自动化运维解决方案蓝图。
|
5天前
|
运维 Kubernetes 持续交付
构建高效自动化运维体系:基于容器技术的持续集成与部署实践
【5月更文挑战第13天】 在现代软件开发周期中,持续集成(CI)和持续部署(CD)已成为提升开发效率、保障产品质量的关键环节。随着云计算和微服务架构的普及,容器技术如Docker和Kubernetes为运维领域带来了革命性的变革。本文旨在探讨如何利用容器技术构建一个高效、可靠的自动化运维体系,实现从代码提交到产品发布的全过程自动化管理。通过深入分析容器化技术的核心原理,结合实际案例,我们将阐述如何优化持续集成流程、确保自动化测试的覆盖率、以及实现无缝的持续部署。
26 2
|
5天前
|
应用服务中间件 nginx
如何在树莓派部署Nginx并实现无公网ip远程访问内网制作的web网站
如何在树莓派部署Nginx并实现无公网ip远程访问内网制作的web网站
12 0