Для того чтобы развернуть приложение, использующее Vue.js, Nest.js и phpMyAdmin, вам понадобятся следующие шаги:
1. Установка и настройка Node.js и Vue.js:
- Установите Node.js, следуя инструкциям на официальном сайте Node.js.
- После установки Node.js у вас будет доступ к Node Package Manager (npm). Вы можете установить Vue.js с помощью следующей команды:
npm install -g @vue/cli
- Создайте новое приложение Vue с помощью следующей команды:
vue create my-vue-app
Здесь "my-vue-app" - название вашего приложения, вы можете выбрать любое другое название.
2. Установка и настройка Nest.js:
- Установите Nest.js CLI с помощью следующей команды:
npm install -g @nestjs/cli
- Создайте новое приложение Nest.js с помощью следующей команды:
nest new my-nest-app
Здесь "my-nest-app" - название вашего приложения, вы можете выбрать любое другое название.
3. Настройка базы данных:
- Установите phpMyAdmin, следуя инструкциям на официальном сайте phpMyAdmin.
- Создайте новую базу данных и сконфигурируйте phpMyAdmin для доступа к ней. Запишите данные для подключения к базе данных (хост, имя пользователя, пароль и т.д.), они понадобятся для настройки Nest.js.
4. Настройка приложения Vue.js для развертывания:
- Перейдите в папку вашего приложения Vue.js:
cd my-vue-app
- Откройте файл vue.config.js
и добавьте следующий код:
module.exports = { outputDir: 'dist', assetsDir: 'static', devServer: { proxy: { '/api': { target: 'http://localhost:3000', // адрес вашего Nest.js сервера ws: true, changeOrigin: true } } } }
Этот код настраивает Vue.js приложение для использования прокси-сервера для перенаправления запросов API к Nest.js серверу.
5. Настройка Nest.js для подключения к базе данных:
- Откройте файл my-nest-app/src/app.module.ts
и добавьте следующий код:
import { Module } from '@nestjs/common'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', // хост базы данных port: 3306, username: 'root', // имя пользователя базы данных password: 'password', // пароль пользователя базы данных database: 'my-database', // название базы данных autoLoadEntities: true, synchronize: true, }), ], }) export class AppModule {}
Здесь замените значения хоста, имени пользователя, пароля и названия базы данных значениями, которые вы записали на предыдущем шаге.
6. Запуск приложения:
- В папке вашего Nest.js приложения (my-nest-app
) выполните следующую команду для запуска сервера:
npm run start:dev
- В папке вашего Vue.js приложения (my-vue-app
) выполните следующую команду для запуска фронтенд-сервера:
npm run serve
- Откройте браузер и перейдите по адресу http://localhost:8080
чтобы увидеть запущенное приложение.
Таким образом, вы подробно развернули приложение, использующее Vue.js, Nest.js и phpMyAdmin, и сделали его доступным для работы.