Руководство по публикации сервера Vue/Nuxt Project (несколько изображений)

Node.js
Руководство по публикации сервера Vue/Nuxt Project (несколько изображений)

Многие фронт-концевые друзья могут не понимать конфигурацию сервера. Сегодня я вдруг обратился к предыдущей статье, а модификации были пересмотрены и поделились, дали вам несколько общих веб-серверов проектов развертывания.

написать впереди

Каждый из серверов, описанных ниже, очень сложен для погружения, и в этой статьеПросто для обсуждения базового развертывания и использования. Более продвинутые знания и использование по-прежнему нуждаются в друзьях, чтобы исследовать и открывать их самостоятельно, я надеюсь, вы сможете понять некоторые из них, прежде чем начнете читать.LinuxОсновы не выглядят слишком сложными.

Примечание: Большинство приведенных ниже примеров основаны наvue-routerизhistoryСтатические файлы, сгенерированные по упаковке в режиме, другие рамки аналогичны

Nginx-сервер

Nginxэто высокая производительностьHTTPи обратный проксиwebСервер, в случае высокого параллелизма соединений,NginxВыступил довольно хорошо.

Установка Nginx

Я не буду говорить об этом здесь, нуждающиеся друзья могут посмотреть это.это

Модификация конфигурации

поддерживатьhistoryрежим, мы хотим изменитьnginx/conf/nginx.confдокумент

location / {
    root   html;
    try_files $uri $uri/ /index.html; # 只需要加上这么一行
    index  index.html index.htm;
}

Затем поместите статические ресурсы вhtmlвнутри папки

затем начнитеNginxсервер

cd usr/local/nginx/sbin
./nginx

Затем войдите на свой сервер в строке OK.

Поддержка GZip

nginxПринцип реализации сжатия ресурсов заключается вngx_http_gzip_moduleМодуль перехватывает запрос и делаетgzipтип делатьgzipCompression, этот модуль является базовым по умолчанию и не нуждается в перекомпиляции, просто откройте его напрямую. Общая конфигурация выглядит следующим образом

#开启和关闭gzip模式
gzip on|off;

#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 1;

# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on|off

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 2 4k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

NginxХотя конфигурация проста, она сама по себе очень мощная, а прокси, загрузка и т. д. очень практичны.

сервер Apache

ApacheЭто первое в мире программное обеспечение веб-сервера, которое очень широкое. Благодаря VuerouterhashПаттерны по сути ничем не отличаются от статических ресурсов, вApacheПубликовать в Интернете относительно просто, здесь мы пропускаем публикацию и сразу переходим к настройке для поддержки режима истории.

Базовая конфигурация

  1. Изменить конфигурацию Apache по умолчанию

первая доработка\conf\httpd.confФайл дает файловую поддержкуrewrite

оказаться

// 这一行需要解开注释 引入这个模块
LoadModule rewrite_module modules/mod_rewrite.so

Затем добавьте или измените следующий код

# 重写文件根目录
DocumentRoot "/usr/local/apache/demo"
# 目录
<Directory "/usr/local/apache/demo">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    Options Indexes FollowSymLinks

    #
    # 修改未允许重写
    AllowOverride all

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>
  1. Добавить правило htaccess

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

первый в иindex.htmlНовое братское место.htaccesФайл, пожалуйста, обратитесь кVue-RouterОфициальный сайтпример

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Apache включает сжатие Gzip

/usr/local/apache/bin/apxs -i -c -n -a mod_deflate.so

Развертывание сервера Tomcat

В текущей среде, где передняя и задняя части разделены, как правило, немногие используют его.Tomcatделатьwebсервер.有的企业可能会配合着SpringMVCДавайте воспользуемся им вместе и напишем здесь. Он также прост в настройке.

настроитьserver.xml

найди первымTomcatв каталоге сервераtomcat/conf/server.xmlфайл, нашелHost, измените его на желаемую конфигурацию. в основномappBase, который определяет базовый каталог для статических файловых запросов.

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
  <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
          prefix="localhost_access_log." suffix=".txt"
          pattern="%h %l %u %t &quot;%r&quot; %s %b" />

</Host>

Настроить для поддержки режима истории

Просто добавьте в опубликованную папкуWEB-INFв папке конфигурации. Как показано ниже

WEB-INFпапку в проекте, затемtomcatбудет автоматически сканироватьweb.xmlЗатем добавьте конфигурацию.

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">
  
  <!-- <display-name>webapp</display-name> -->
  <description>
    webapp
  </description>
  <error-page>  
    <!-- 重写404页面 -->
    <error-code>404</error-code>  
    <location>/index.html</location>
  </error-page>  
</web-app>

Эта конфигурация является полной, можно сказать, что вор просто. Что касается того, как установитьTomcatСервер, давайте решим сами 😁

Проект Nuxt (рендеринг на стороне сервера)

выпускатьSSRКогда проект официально рекомендовал два методаРазвертывание приложения рендеринга на стороне сервераа такжеРазвертывание статического приложения. Статическое развертывание приложений в основном теряетсяSSRпреимущества, а способ развертывания аналогичен описанному выше. Здесь обсуждается только развертывание приложения рендеринга на стороне сервера.

Развертывание приложения рендеринга на стороне сервера отличается от статического развертывания, нам также необходимо развернуть его на сервере.Nodeокружающая обстановка.

Node环境部署

  1. CD To/usr/localnodeпосле входаnodeПапка (имя может быть произвольным, здесь узел используется для демонстрации)
cd /usr/local
mkdir -p node
  1. скачатьNodeЗдесь я использую последнюю долгосрочную версию службы. Если вы хотите установить другие версии, вы можетездесьнайти, вы также можете использоватьnvmуправлять своимNode,Простойруководство 
wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.gz
  1. После завершения загрузки разархивируйте и переименуйте папку
# 解压到当前文件夹
tar -zxvf node-v10.13.0-linux-x64.tar.gz -C ./
# 改名
mv node-v10.13.0-linux-x64/ ./node10.13.0
  1. Установите мягкое соединение дляnode,npmЗарегистрируйте переменные среды (другиеnpmГлобальный пакет также должен быть зарегистрирован так)
# 软链接指向到node npm
ln -s /usr/local/node/node10.13.0/bin/node  /usr/local/bin/node
ln -s /usr/local/node/node10.13.0/bin/npm  /usr/local/bin/npm
  1. Проверьте, успешно ли установлена ​​программная ссылка
ls -al /usr/local/bin

Следующий дисплей указывает на успех

затем используйтеnode -v

node -v
# 出现版本号就是安装成功了
v10.13.0

Пока нашNodeСреда успешно установлена, и следующим шагом будет продолжениеnuxtразвертывать

Nuxtразвертывать

  1. Установить глобальноnuxt, Затем установите мягкое соединение вышеописанным способом
# 安装
npm i nuxt -g
# 建立软连接
ln -s /usr/local/node/node10.13.0/bin/nuxt  /usr/local/bin/nuxt
  1. развертывание кода

назад/localпапку, мы создаемnuxtфайл для хранения моегоnuxtпроект. затем введитеnuxtпапка

# 回到local
cd ../
mkdir nuxt
cd nuxt

Выполнить в локальной средеnuxt build, который затем генерирует.nuxtпапка.

затем изменитьpackage.json, добавить в него новый контент,nuxtПриложение автоматически настроит номер порта и адрес службы в соответствии с приведенной ниже конфигурацией.

"config": {
  "nuxt": {
    "host": "0.0.0.0", # 通过IPV4访问
    "port": xxxx
  }
},

Затем положить в проект.nuxt文件夹 static文件夹 package.json nuxt.config.jsзагрузил на серверnuxtпапка,

затем вnuxtВыполнить в папке

# 为了方便我这这里服务器上执行了install，正式项目不建议这么干
npm i

Выполнить после завершения загрузкиnuxt startСледующий журнал показывает, что мы успешно запустили нашуnuxtзаявление

pm2использовать

С момента использованияNodeсервис, то нам лучше использоватьpm2Сделайте процесс опекуна, как дляpm2что есть иpm2Что он делает? В этой статье мы не будем вдаваться в подробности. Если вам интересно, вы можете посмотреть сами.

Установить первымpm2

npm i pm2 -g
# 建立软连接
ln -s /usr/local/node/node10.13.0/bin/pm2  /usr/local/bin/pm2

затем вpackage.jsonПрисоединяйсяpmЗапустите команду или запустите ее напрямую, как показано ниже.

# package.json
"scripts": {
    "pm2:nuxt": "pm2 start npm --name 'XXX' -- run nuxt:start", # 启动名字为xxx的进程
    "nuxt:start": "PORT=xxxx nuxt start",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "pm2:stop:all": "pm2 stop all" # 停止所有进程
  }
# 直接启动命令
pm2 start npm --name 'XXX' -- run nuxt:start

Такой журнал означает успех

Ниже приведены некоторые часто используемыеpm2Заказ

pm2 start 0        # 启动 id为 0的指定应用程序
pm2 restart 0      # 重启 id为 0的指定应用程序
pm2 stop 0         # 停止 id为 0的指定应用程序
pm2 delete 0       # 删除 id为 0的指定应用程序

pm2 list           # 查看当前正在运行的进程
pm2 start all      # 启动所有应用
pm2 restart all    # 重启所有应用
pm2 stop all       # 停止所有的应用程序
pm2 delete all     # 关闭并删除所有应用
pm2 logs           # 控制台显示所有日志
 
pm2 logs 0         # 控制台显示编号为0的日志
pm2 show 0         # 查看执行编号为0的进程
pm2 monit xxx      # 监控名称为xxxx的进程

До сих порNuxtПриложение даже развернуто.

Проблема

  1. пройти черезkoa server.jsКогда он запускается, к нему нельзя получить доступ из Интернета. Используется сервер Alibaba Cloud, добавлены правила группы безопасности.

    Я еще не нашел точную причину этой проблемы, но позже изменил ее.nuxt startПосле запуска доступ к внешней сети осуществляется плавно. Надеюсь, кто-то из знающих ответит.

  2. Недостаточно прав для использованияsudo suне могу найтиnode npmкоманда ожидания

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

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm

Суммировать

После того, как проект закончен, его нужно аккуратно выпустить, чтобы получить чувство выполненного долга, правильно 😁, типов серверов в этой статье очень много, но не помешает узнать больше 😭 , научиться настраивать сервер, а затем сотрудничать сNodeПубликация автоматизированных скриптов, процесс публикации просто безупречен.

исходный адресСтавьте ⭐, если считаете это полезным

Категории