Как правильно настроить развертывание (деплой) приложения, использующего фреймворк Vue2 и серверный фреймворк Express?

Как организовать связку между сервером и базой данных в рамках вашего приложения Vue2 + Express + MongoDB с использованием Docker? Как правильно настроить деплой приложения и обновлять сервер?

Я разрабатываю приложение с фронтендом на Vue2, бэкендом на Express и базой данных MongoDB, которые работают вместе через Docker на моем локальном компьютере. Я настраиваю проксирование запросов к API на порт, на котором запущен мой сервер. 

```javascript
devServer: {
  proxy: {
    '^/api': {
      target: 'http://192.168.0.132:3000',
      ws: true,
      changeOrigin: true
    },
  }
} 

await mongoose.connect('mongodb://127.0.0.1:27017/example', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
```

Теперь у меня возникли вопросы по организации приложения на сервере и настройке деплоя. Я создал два виртуальных хоста в Nginx, api.example и app.example, и хочу знать, правильно ли я обращаюсь к серверу в такой связке, и как лучше настроить взаимодействие сервера с базой данных?

Также я хочу настроить CI/CD с помощью GitLab. Для фронтенда у меня все ясно - я собираю исходный код и копирую его в нужную папку. Но как правильно обновлять сервер?

Вот мой пайплайн для фронтенда:

```yaml
build site:
  image: node:16
  stage: build
  script:
    - npm ci
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist

deploy:
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ root@example:/var/www/app.example/html
```
Буду благодарен за помощь!
  • 17 октября 2023 г. 9:20
Ответы на вопрос 2
Для связки между сервером Express и базой данных MongoDB в рамках вашего приложения Vue2 + Express + MongoDB с использованием Docker, вам следует использовать Docker Compose для описания и запуска окружения с несколькими контейнерами.

Вам потребуется следующий файл `docker-compose.yml`:

```yaml
version: '3'
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    volumes:
      - ./frontend:/app
    command: npm run serve
    depends_on:
      - server
  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./server:/app
    depends_on:
      - database
  database:
    image: mongo
    ports:
      - 27017:27017
    volumes:
      - ./data:/data/db
```

Здесь frontend, server и database - это сервисы для вашего фронтенда Vue2, сервера Express и базы данных MongoDB соответственно. Каждый сервис определяется в своей собственной папке, где есть соответствующий Dockerfile для сборки образа.

Чтобы запустить ваше приложение в Docker, выполните команду:

```bash
docker-compose up --build
```

Теперь ваше приложение будет запущено в Docker контейнерах, и они будут взаимодействовать друг с другом, используя имена сервисов (frontend, server, database) в качестве хостов.

Что касается настройки деплоя приложения и обновления сервера, вам следует настроить CI/CD процесс в GitLab для автоматического развертывания приложения на сервере.

Для этого вы можете использовать SSH для подключения к серверу и выполнять необходимые команды для обновления кода и перезапуска сервера Express. Ниже пример пайплайна для GitLab CI/CD, который может быть полезным:

```yaml
deploy:
  stage: deploy
  script:
    - ssh root@example "cd /var/www/app.example && git pull origin master"
    - ssh root@example "cd /var/www/app.example && npm install"
    - ssh root@example "cd /var/www/app.example && npm run build"
    - ssh root@example "pm2 restart app.example"
```

В этом примере пайплайна для деплоя мы подключаемся к серверу по SSH и выполняем команды `git pull` для обновления кода, `npm install` для установки зависимостей, `npm run build` для сборки фронтенда и `pm2 restart` для перезапуска сервера Express с использованием pm2.

Вы можете настроить переменные окружения в GitLab CI/CD для хранения конфиденциальных данных, таких как SSH_PRIVATE_KEY, и использовать их в вашем пайплайне.

Таким образом, вы сможете автоматически развертывать и обновлять ваше приложение Vue2 + Express на сервере с помощью GitLab CI/CD и SSH.
1. Передавайте адрес и данные для авторизации через переменные окружения.
2. Укажите адрес виртуальной машины с базой прямо в коде, если он известен.
3. Вместо прямого использования адресов, лучше использовать доменные имена, но для этого требуется наличие DNS сервера.

Относительно Nginx, если используются доменные имена, не забудьте добавить их в файл /etc/hosts, если DNS сервер недоступен.
Похожие вопросы