精华内容
下载资源
问答
  • 2022-03-07 23:30:35

    1.编译你的React项目

    我的项目是通过create-react-app脚手架创建的,当项目编写完成之后可以执行package.json下面的build脚本就可以了:

    npm run build

    build完成之后会发现在项目根目录下多了一个build文件夹,这个是我们后面部署到服务器中需要的文件。

    2.服务器配置

    2.1 购买阿里云服务器(略)

    2.2安装Nginx服务器软件

    1、进入任意目录,我选用的是通常选用的/usr/local/src目录

    cd /usr/local/src 
    2、下载相关组件
    下载nginx压缩包,nginx: download选择一个版本,右键复制链接地址、

    我安装的版本 wget https://nginx.org/download/nginx-1.18.0.tar.gz
    解压压缩包 tar -xzvf nginx-1.18.0.tar.gz
    3、可能会有报错,因为没有安装需要的环境
    安装nginx相关组件

    apt-get install libpcre3 libpcre3-dev
    apt-get install zlib1g-dev
    apt-get install openssl libssl-dev

    三、启动nginx

      1、启动nginx

    /usr/local/nginx/sbin/nginx

       2、查看nginx是否启动成功

    netstat -lnp

      3、基本操作

    /usr/local/nginx/sbin/nginx#启动
    /usr/local/nginx/sbin/nginx -s stop(quit、reload)#停止/重启
    /usr/local/nginx/sbin/nginx -h#命令帮助
    vi /usr/local/nginx/conf/nginx.conf#配置文件

    四、nginx配置

      1、打开配置文件

    vi /usr/local/nginx/conf/nginx.conf

      2、配置相关配置项

    我把上面打包的build文件放在了 /usr/ 目录下与下面的路径对应,listens是nginx占用的端口号

    server {
        listen      8002;    
        server_name 12.123.12.111; 这填写你自己的公网地址

        location /{
            root    /usr/build;
            index   index.html;
        
        }

      

    更多相关内容
  • React项目部署在Tomcat中的方法

    万次阅读 2018-08-15 01:29:43
    之后便走访百度、谷歌,终于找到了项目部署失败的原因,下面将进行一下总结。 部署方法: 使用npm run build将项目打包 把打包后的文件夹中内容放到tomcat中webapps下的Root中 开启服务器访问localhost:8080端口...

    博主辛辛苦苦敲的react代码,结果想部署到Tomcat中一直都无法显示。之后便走访百度、谷歌,终于找到了项目部署失败的原因,下面将进行一下总结。

    部署方法:

    • 使用npm run build将项目打包
    • 把打包后的文件夹中内容放到tomcat中webapps下的Root中
    • 开启服务器访问localhost:8080端口即可以看到你的项目内容

    不放置在Root目录下的坑:

    由于默认path.js【路径:你的react项目名\node_modules\react-scripts\config\path.js】的配置是’/’即对根目录有效,所以如果不放在root下则需要将’/’变成’./’即相对路径有效。(修改代码约在第45行)
    这里写图片描述
    此时你可以通过localhost:8080/项目名 进行访问你的react项目

    展开全文
  • 公司的前端项目部署方式比较简单,整个过程基本上是手动的; 目标 通过工具实现以下几任务: 编译、部署自动化; 选择指定版本进行回滚; 区分不同的分支(环境); 技术方案 选用 jenkins 作为部署工具;也...
  • 前端react项目如何部署到nginx

    千次阅读 2022-02-17 16:03:24
    把前端代码部署到服务器,我一直以为是后端程序员的工作,直到跟我搭档的后端说他没有做过前端部署时,。。。内心奔腾啊, 另一面领导在群里说,我们暂时不用那么复杂,只要编译打包到nginx里就可以了。??nginx是...

    缘由:公司架构只给了一台测试环境的IP地址,说让我把项目打包部署到nginx,当时听到此话,有些诧异,一直以来以为前端代码部署到测试或者生产环境都是后端同事的活,之前自己虽然部署过,一种是ftp直接替换编译好的文件,另一种就是使用后端配置好的Jenkins,一键编译;

    学习:nginx是俄罗斯某程序员写的反向代理服务器,简单理解就是在浏览器和服务器直接再添加一个服务器用以转发浏览器的服务,好像媒介一样;

    为了记录研究自己把自己写的东西部署到linux服务器的过程,在此记录一下过程;

    1、为了模拟公司测试环境,随便找腾讯云,华为云等等申请免费试用服务器拿来练手;
    申请完之后,需要找一个自己适合的SSH连接工具,我这里使用的是Xshell,试用足够了,为了方便文件上传,这个软件可以直接拉取文件进编辑器区域;
    2、把服务器开机,并用xshell连接服务器公网地址,如下就表示连接成功了;
    在这里插入图片描述

    此时需要检测linux安装的是什么系统,需要正确安装相应系统下的nginx软件才行。
    我这里使用yum -help 有输出即表示是centos镜像,不过我这里命令行直接有提示,也可以区分出来;

    在这里插入图片描述
    3、nginx安装前准备
    (1)安装编译工具以及库文件

    yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel
    

    (2)安装PCRE,可以让nginx支持Rewrite功能

    cd /usr/local/src/  进入相应安装目录
    wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz  下载软件压缩包
    tar zxvf pcre-8.35.tar.gz  解压安装包
    cd pcre-8.35 进入安装包目录
    ./configure
    make && make install  编译安装
    pcre-config --version  查看PCRE版本
    

    4、nginx安装
    (1)下载nginx

    cd /usr/local/src/
    wget http://nginx.org/download/nginx-1.20.2.tar.gz  目前最新最稳定的版本
    tar zxvf nginx-1.6.2.tar.gz  安装包
    cd nginx-1.20.2  进入相应目录
    ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
    ---------------------------------------------------------------------------------------------------------------------------------------------
    make
    make install 编译安装
    /usr/local/webserver/nginx/sbin/nginx -v 查看nginx版本
    
    cd /usr/local/webserver/nginx/conf
    /usr/local/webserver/nginx/sbin/nginx -t  检查配置文件nginx.conf的正确性
    /usr/local/webserver/nginx/sbin/nginx  启动nginx
    

    5、此时打开服务器公网地址,可以看到nginx欢迎界面
    6、yarn build编译前端文件并打zip压缩包
    7、把压缩包放到/tmp 文件夹下
    8、移动压缩包到、usr/local/webserver/nginx/html
    9、解压压缩包 unzip build.zip
    至此所有步骤结束,浏览器可以查看到自己写的前端项目

    展开全文
  • } #react项目 c:\\html\react\index.html  location /react/ { root c:\\html; index index.html; } #重点 location /static/ { try_files /react$uri /$uri =404; } #error_page 404 /404.html; # redirect ...
    
    #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
             # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
            location / {
                root  c:\html\vue;
                index  index.html;
                try_files $uri $uri/ /index.html;
            }
    
            location /api/vue/ {
                 proxy_pass http://127.0.0.1:5000/vue/;
            }
           #react项目 c:\\html\react\index.html
            location /react/ {
                root    c:\\html;
                index  index.html;
            }
            #重点
    
            location /static/ {
                try_files
                    /react$uri
                    /$uri
                    =404;
            }
        
    
            #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   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;
            #}
        }
        
        
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        
    
    
        # HTTPS server
        #
        #server {
        #    listen       443 ssl;
        #    server_name  localhost;
    
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;
    
        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;
    
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    }
    

    try_files 部分是重点。

    因为,这是解决 css,js 文件找不到的 一个解决方法。

    另外一个就是 vue 的 index.js文件  

    assetsPublicPath: './',

     assetsPublicPath: './',

     

    展开全文
  • 3、生成项目的部署文件 在你的react项目根目录下执行: npm run build 复制代码成功后,会生成dist目录,该目录的内容就是你要部署到服务器上的文件。 你可以通过: sup [-r] [-P port] 源路径 user@目标IP地址:...
  • React+SpringBoot项目部署

    2021-03-15 21:41:31
    你会得到一结构如下的项目:image.png我们可以通过 yarn start 运行这个项目:image.pngimage.png跑起来的页面是这样的:image.png好的,现在你已经成功在开发环境中跑起来了,接下来我们来打包,然后将其部署到...
  • React从开始搭建到项目部署到服务器

    万次阅读 2019-05-22 17:00:00
    什么是React?Vue跟React相比的区别是哪些?为什么大厂都会选择React? 区别 设计模式 React采用的是MVC模式(严格的view层);Vue采用的是MVVM模式; 组件写法不同; react主张jsx+inline style,也就是讲...
  • 主要给大家介绍了关于Nginx配置React项目Url后面直接输入路由路径时报404问题的解决方法,文中通过示例代码将解决的方法介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
  • Windows下写好的前端react项目部署到服务器上运行 近期我需要将自己写好的react前端项目打包部署到自己搭建的服务器上,为了通过ip加端口号让其他主机可以访问。出现了很问题,下面我将出现的问题以及解决方案列出...
  • 前言:我们都知道有些react项目打包后生成的不管是dist,还是build的文件,直接打开都无法直接浏览到项目,然后查看控制器,就发现它报错。 如图: 用脚手架创建的 react / vue 项目,已经集成了webpack,只要运行...
  • 这篇文章是在阿里云ecs云服务器——Vue项目部署(1)的基础上部署另一个React项目的后续 注:一般的react项目打包部署过程和这篇文章是一致的。 本地打包 为了使用less并且不破坏webpack配置(不使用 npm run eject...
  • webpack打包react项目部署到nginx上

    千次阅读 2019-12-19 11:26:01
    计划赶不上变化,由于项目的需要,不适用tomcat,使用nginx,于是需要将react项目打包放到nginx下或者放到单独的文件中,通过nginx来做代理访问我们的项目。 安装nginx 于是在本地测试环境中装了一nginx,安装很...
  • 本来计划是将一个React工程部署在自己的Centos虚拟机中,但是因为一些网络和安全问题暂时停止了这个计划,于是就把该项目转移到阿里云服务器中,这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...
  • 1.react项目打包 1.1 终端运行打包命令 在编辑器的终端运行vue项目打包命令 yarn build 打包成功如下: 这时我们可以看到项目目录出来一build文件夹,记住它,后面部署就靠它了。 1.2 修改配置 在package.json...
  • nginx 上部署 react 项目

    千次阅读 2020-05-31 10:44:33
    打包npm run build 生成dist文件夹 ... ...1、打包好你的react本地项目,dist中具有打包好的文件 2、将dist里的文件夹拷贝/home/root/下创建的react-demo文件中 3、进入/usr/local/nginx/...
  • 之前一年前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过...
  • 一般我们部署前端项目都会自己搭或者租用一服务器然后把项目打包成静态文件后部署到服务器上,再购买一域名通过ip指向具体的服务器地址之后,然后就可以把项目对应的域名提供给别人访问了,如果是公司项目或者...
  • react-project:React项目

    2021-08-05 07:02:17
    个项目是用引导的。 可用脚本 在项目目录中,您可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑,页面将重新加载。 您还将在控制台中看到任何 lint 错误。 npm test 在...
  • 本文重点是建立restframework提供REST的DRF项目,并且完成与REACT的前端交互(加上必要的中间插件) 1、后端的搭建 1、按照官方教程安装相关依赖 http://www.django-rest-framework.org/ sudo pip3 i...
  • 您的应用已准备好进行部署! 有关更信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ,您将无法返回! 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从您的项目中删除单个...
  • 项目在本地开发时,没有任何问题,部署到服务器上出现了2问题。 问题一:开发的应用是单页面应用,从主页一步一步点击没有问题,一旦刷新或者直接在地址栏输入,都会出现报错,显示的是404,无法找到页面。 问题...
  • 使用Reactjs实现文件zip下载器的项目项目使用以下项目并从中得到启发 关于运行React App Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行该...
  • React启动项目

    2021-02-12 23:59:41
    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更信息,请参见有关的部分。 yarn eject 注意:这是单向操作。 eject ,您将...
  • 第一个React项目

    2021-02-14 01:02:48
    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更信息,请参见有关的部分。 npm run eject 注意:这是单向操作。 eject ,您将...
  • 您的应用已准备好进行部署! 有关更信息,请参见有关的部分。 npm run eject 注意:这是单向操作。 eject ,您将无法返回! 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从项目中删除单个...
  • 您的应用已准备好进行部署! 有关更信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 eject ,您将无法返回! 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从您的项目中删除...
  • 您的应用已准备好进行部署! 有关更信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 eject ,您将无法返回! 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从您的项目中删除...
  • React+SpringBoot项目部署 我是用的是idea以及webstorm进行编程 react打包 react项目创建按照百度使用webstorm创建react app,随便搜就行 创建好自己的项目写好后进行打包 命令:npm run build 这样子就是打包好...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,227
精华内容 8,890
关键字:

多个react项目部署