Развертывание фронтенд-проекта

Байду внешний интерфейс сервер Nginx

Раньше я редко касался деплоя фронтенд проектов, в этот раз для более всестороннего изучения поставил на эту машину виртуалку, и потренировался как поставить виртуалку на виртуалку.reactнаписаноspaПроект развернут на сервере этой виртуальной машины. из-заlinuxОн также новый, поэтому во всем процессе еще много ям, которые здесь записаны.

Цель

у меня есть один сreactНапишите одностраничное приложение, а затем хотите развернуть на сервере черезipТакие как192.168.1.240/configДоступ к моему приложению по этому пути. этоreactПроект зависит отnode.jsодин изapiобслуживание, мне нужноnginxНастройка прокси делает мойreactПриложение может получить доступ к моемуapiСлужить.

Подготовить

Первое, что нужно подготовить, это упаковатьreactприложение, а затем установитеnginxс однимnode.js.

Для своего проекта я поставилreactВсе упакованные предметы помещаются/root/html/pageConfigпод этот путь.

конфигурация nginx

Исправлятьnginxв каталоге установки./conf/nginx.confдокумент:

#user nodody;
# 1. 由于我的 react 项目打包出来放在 root 目录下，需要设置user 为 root 时内容才能够被访问
user root;

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;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 2. 对我的/api请求转发到8989端口下node.js服务
        location /api {
            proxy_pass  http://127.0.0.1:8989;
        }
        # 3. 在/config下的请求都指向到我放在root下的configPage里的内容
         location /config {
            alias /root/html/configPage;
            index index.html index.htm;
            #rewrite /config  /root/html/configPage/index.html;
            try_files $uri $uri/ /config/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;

Вот три места, где только файл конфигурации по умолчанию был изменен в соответствии с моими требованиями:

  1. Исправлятьuserдляroot, так чтоrootСодержимое ниже может быть доступно
  2. новыйlocation /apiнастраиватьproxy_passсделать/apiСледующий запрос направляетсяproxy_passзадаватьnode.jsОфис обслуживания, Satisfy My Front-End PageapiПроблема с прокси интерфейса
  3. новыйlocation /configконфигурация такая, что/configВсе запросы переадресовываются мнеreactПуть, по которому находятся упакованные файлы. поэтому я получаю доступ192.168.1.240/configможно увидеть мою страницу.Вот и скопировалlocation /конфигурация с использованием того жеrootУказав на путь, результат не смог получиться, я проверил информацию и обнаружил, что она должна быть написана какaliasпросто делать

Конфигурационный файл здесь может потребоваться изменить несколько раз, чтобы добиться успеха.Следует отметить, что после каждой модификацииnginxконфигурация, нужно перезагрузитьnginx:

nginx -s reload

Проблема пути статического ресурса

Когда упакованный файл отправляется на сервер, статический файл ресурсов может не быть найден.

Причина пути к ресурсу не найдена

Возможная причина в том, что когдаreactКогда приложение упаковано, оно генерируетindex.htmlвставить в файлstyleа такжеscriptМетки пути нет, поэтому не могу найти статические ресурсы.

Решение для статических ресурсов не найдено

нуждаться вwebpackв файле конфигурации для измененияpublicPathЭто свойство, это свойство повлияет на вставку ваших статических файлов ресурсов вindex.htmlпуть в . Нравятся настройки моего проектаpublicPath: './'Вот и все, вы можете изменить его несколько раз и несколько раз упаковать, чтобы попробовать.

Внешняя маршрутизация

Классификация внешней маршрутизации

Внешняя маршрутизация разделена на две реализации, одна из которыхhashRouter, другой должен использоватьH5новыйHistory APIосуществленныйbrowserRouter. из-заhashRouterПуть занимает#Он не особенно красив, но в целом все еще используетсяbrowserRouterболее.

Проблема с внешней маршрутизацией

Грубо говоря, интерфейсная маршрутизация означает, что путь изменился.Вместо запроса к серверу используйтеjsчтобы изменить способ работы страницы. В этом случае используйтеbrowserRouterЕсли это так, то здесь есть проблема Я использую интерфейсную маршрутизацию, чтобы перейти к определенному пути./xxx, это когда я обновляю страницу. В это время я пойду на сервер, чтобы получить ресурсы. Не должно быть никаких ресурсов по этому внешнему пути маршрутизации, поэтому он появится.404сообщить об ошибке.

решение

Исправить обновление страницы404Эта проблема, просто верните все запросыindex.html, вы можете искатьhistory fallbackСм. соответствующую информацию для этого ключевого слова.

это для меняnginxЧто касается конфигурации, просто добавьтеtry_files $uri $uri/ /config/index.html;, вы можете отправить все внешние пути маршрутизации на сервер и вернуть ихindex.html, это решает404вопрос.

Проблема сопоставления пути маршрута

Настройте вышеуказанноеnginxИ поместите упакованные файлы в соответствующий каталог, а затем поместите мойapiЗапустите службу, а затем посетите192.168.1.240/config, страница может отображаться нормально, и интерфейс также может нормально проксировать запросы. Но страница с маршрутизацией не отображается.

Причина сопоставления пути маршрута

Напомним, что вreact-router-domизRouteпередать тегpath={'/xx'}атрибут, интерфейсная маршрутизация будет основываться на этомpathсделать соответствующийRouteпрошел дальшеComponentкомпоненты. тогда в моемnginxв настройках я поставилlocation /config, то есть мой фактический путь доступа имеет префикс/config, поэтому каждыйRouteВсе пути, переданные в тегах, отсутствуют из-за отсутствия/configПрефикс вызывает неудачу всех совпадений, поэтомуRouteНет возможности отобразить страницу.

Метод модификации сопоставления пути маршрута

Метод прост, вBrowserRouterдобавить одинbasenameсвойство, перейти к этому свойствуconfig (Какова конкретная ценность, в зависимости от того, что вы даетеnginxнастраиватьlocationпрефикс, в моем случае это былconfig),такRouteбудет добавлено при сопоставлении путиbasename, чтобы он мог сопоставить соответствующий путь, а затем отобразить соответствующую страницу.

Суммировать

правильноlinuxнезнакомый,nginxЯ тоже не знаком с ним, я полагался на Baidu и много раз пытался его модифицировать.nginxконфигурация, наконец, в состоянииreactУпакованные файлы развернуты,vueРазвертывание проекта ничем не отличается.

Категории