Как установить vue.js spa-приложение на vps-сервер и подключить node.js, mongodb, nginx, ssl, gzip

Как установить vue.js spa-приложение на vps-сервер и подключить node.js, mongodb, nginx, ssl, gzip

13 октября, 2021 в 11:54 Автор – Сергей Богданов mongodb, nginx, nodejs, ubuntu, vuejs 37

Приведенный ниже конфиг актуален для серверов на базе ОС Ubuntu. Конфиг полностью рабочий и протестирован на сервере.

Обновление

sudo apt-get update
sudo apt-get upgrade

Установка nginx

sudo apt install nginx

Доменное имя

Привязываем ип vps к A-записи dns домена И www.имя-сайта тоже привязать к тому же ип

Работа с Nginx конфигами

Редактировать стандартный конфиг: sudo nano /etc/nginx/sites-available/default

После редактирования

sudo nginx -t
sudo service nginx restart

Конфиг nginx

server {
	listen 80;
	listen [::]:80;

	root /var/www/html;
	index index.html;

	server_name имя-сайта  www.имя-сайта;
}

В директории /var/www/html создаем файл-заглушку index.html

<!doctype html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <title>Имя сайта</title>
  </head>
  <body>
    <h1>Сайт находится в разработке...</h1>
  </body>
</html>

Установка ssl сертификата

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python3-certbot-nginx

sudo certbot --nginx

Тест установленного сертификата

https://www.ssllabs.com/ssltest/analyze.html?d=имя-сайта https://www.ssllabs.com/ssltest/analyze.html?d=www.имя-сайта

Установка node

setup_14 - можно заменить на нужную версию

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -v

Установка pm2

npm i pm2 -g

Установка mongodb

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
sudo apt-get update
sudo apt-get install -y mongodb-org

sudo systemctl enable mongod.service
sudo systemctl start mongod

Проверка

sudo systemctl status mongod

Перенос mongodb

Делаем дамп базы командой mongodump

Linux имя-пользователя/dump/имя-бд

В windows c:\Program Files\MongoDB\Tools\100\bin

Заливаем полученные файлы на сервер в директорию

/tmp/dump/имя_базы mongorestore /tmp/dump

Загружаем приложение

С помощью git, ftp, файлового менеджера и тп /home/apps/che-cho-cha

Конфиг nginx был обновлен, проверяем

/etc/nginx/sites-available/default

Дополняем конфиг nginx для node приложения

Статика находится в директории public

Окончательный конфиг nginx для node, vue, ssr, spa, gzip приложения

/etc/nginx/sites-available/default

server {
	client_max_body_size 10m;

        gzip on;
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_min_length 0;
        gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

  	root /home/apps/имя-приложения/public;

	index index.html;

	server_name che-cho-cha.ru www.che-cho-cha.ru;

	location / {
		proxy_pass http://localhost:3000;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection 'upgrade';
		proxy_set_header Host $host;
		proxy_cache_bypass $http_upgrade;
	}

    location ~ \.(css|js|svg|woff|woff2|ico|ttf|eot|jpe?g|png|txt|webmanifest|pdf)$ {
      try_files $uri $uri/ =404;
      expires 1y;
      add_header Cache-Control "public";
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/имя-сайта/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/имя-сайта/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
	if ($host = www.имя-сайта) {
		return 301 https://$host$request_uri;
	} # managed by Certbot

	if ($host = имя-сайта) {
		return 301 https://$host$request_uri;
	} # managed by Certbot

	listen 80;
	listen [::]:80;

	server_name имя-сайта www.имя-сайта;
        return 404; # managed by Certbot
}

После редактирования

sudo service nginx restart

Запуск приложения с помощью pm2

pm2 start app.js --name “myApp”

Чтобы после перезагрузки сервера, приложение запускалось автоматически

pm2 save
pm2 startup

Если надо удалить процесс

pm2 unstartup systemd

Как установить vue.js spa-приложение на vps-сервер и подключить node.js, mongodb, nginx, ssl, gzip

37 комментариев

Оставить комментарий