введение
❝Поскольку одностраничная разработка Vue не способствует SEO, иногда при выполнении некоторых проектов, требующих SEO, необходимо использовать рендеринг на стороне сервера, чтобы поисковые системы могли сканировать информацию веб-сайта и отображать содержимое поиска. Официальная документация по рендерингу на стороне сервера, предоставляемая Vue, позволяет вам самостоятельно создать серверную часть для достижения рендеринга на стороне сервера. Поскольку я ленивый, я использую основную библиотеку Nust.js. Пожалуйста, перейдите к конкретному использованию и APIОфициальная документация сайта. Ниже я в основном делюсь некоторыми конфигурациями развертывания после завершения проекта.
❞
Развертывание проекта
На официальном сайте nuxt.js представлены три метода развертывания, а именно развертывание приложения для рендеринга на стороне сервера, развертывание статического приложения и развертывание одностраничного приложения (SPA).Мне нужно использовать развертывание приложения для рендеринга на стороне сервера. По способу в документе я поставил весь проект на сервер, установил зависимости через npm install, сначала выполнил npm run build, а потом npm run start. Хорошо, запуск прошел успешно, посетите его, вы можете увидеть страницу, и функция работает нормально, но она всегда кажется неправильной, как вы можете разместить все проекты напрямую? И номер порта, который в данный момент прослушивается, выключение сервера отключит службу.
Запустите проект с pm2
Ни в коем случае, я проверил Google, и позже я узнал, что на самом деле, после локальной сборки, запаковать 4 файла .nuxt, static, package.json, nuxt.config.js в сервер, а затем установить пакет зависимостей на сервер. Проекты Nuxt также можно запустить с помощью pm2, установить pm2: npm install pm2 -g, настроить программные соединения
ln -s /usr/local/node/bin/pm2 /use/local/bin/pm2
Выполните pm2 start npm --name "demo" -- run start , где name – идентификатор запускаемого проекта, и выполните pm2 list, чтобы просмотреть текущий запущенный проект. Теперь закройте окно сервера, и проект запустится. Однако к проекту необходимо получить доступ через доменное имя, которое по умолчанию является портом 80. Это достигается с помощью обратного прокси-сервера nginx.
Обратный прокси с Nginx
Пожалуйста, обратитесь к установке NginxРуководство по установке. После завершения установки добавьте в nginx.conf следующее:
upstream hangjia {
server 119.23.173.182:8000; #项目开启的监听地址
}
location ^~/ {
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass http://hangjia/;
}
См. рисунок ниже
![]После завершения настройки перезапустите nginx, получите прямой доступ к доменному имени, и вы сможете проксировать на адрес, открытый проектом. Позже выяснилось, что статические ресурсы исходного nginx не могут быть доступны через прокси, и пришлось добавить папку статических ресурсов.
#manage为nginx里面的静态资源文件夹
location /manage {
autoindex on;
}
После добавления этой конфигурации можно получить доступ и к статическим ресурсам.На этом онлайн-развертывание проекта nuxt завершено.
Эпилог
Все возникшие проблемы найдены через Google.Это всего лишь краткое изложение, и вам удобно забыть вернуться и проверить его позже.Если у вас есть какие-либо дополнения или что-то не так, пожалуйста, оставьте сообщение в области комментариев , спасибо!