Разработка приложения на Node.js и Vue.js + деплой в Docker

В этой статье мы создадим простое приложение ToDo, используя Node.js для серверной части и Vue.js для клиентской. Мы также подготовим Docker образ для удобного развертывания приложения.

Установка необходимых инструментов

Перед началом убедитесь, что у вас установлены следующие инструменты:

• Node.js (включает npm)
• Vue CLI (установите с помощью npm install -g @vue/cli)
• Docker

Создание серверной части на Node.js

Создайте папку для проекта и перейдите в нее:

mkdir todo-app
cd todo-app

Инициализируйте новый проект Node.js:

mkdir server
cd server
npm init -y

Установите необходимые зависимости:

npm install express cors body-parser

Создайте файл server.js:

// server/server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

let todos = [];

app.get('/todos', (req, res) => {
    res.json(todos);
});

app.post('/todos', (req, res) => {
    const todo = req.body;
    todos.push(todo);
    res.status(201).json(todo);
});

app.delete('/todos/:id', (req, res) => {
    const { id } = req.params;
    todos = todos.filter(todo => todo.id !== id);
    res.status(204).send();
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Запустите сервер:

node server.js

Создание клиентской части на Vue.js

Создайте клиентскую часть: В корневой папке проекта выполните:

vue create client

Выберите настройки по умолчанию или настройте по своему усмотрению.

Перейдите в папку клиента:

cd client

Установите Axios для работы с HTTP-запросами:

npm install axios

Измените файл src/App.vue:

<template>
  <div id="app">
    <h1>ToDo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    async fetchTodos() {
      const response = await axios.get('http://localhost:5000/todos');
      this.todos = response.data;
    },
    async addTodo() {
      if (this.newTodo) {
        const todo = { id: Date.now().toString(), text: this.newTodo };
        await axios.post('http://localhost:5000/todos', todo);
        this.newTodo = '';
        this.fetchTodos();
      }
    },
    async removeTodo(id) {
      await axios.delete(`http://localhost:5000/todos/${id}`);
      this.fetchTodos();
    }
  },
  mounted() {
    this.fetchTodos();
  }
};
</script>

<style>
/* Добавьте стили по своему усмотрению */
</style>

Запустите клиентское приложение:

npm run server

Шаг 4: Подготовка Docker образа

Создайте файл Dockerfile в папке server:

# server/Dockerfile
FROM node:14

WORKDIR /usr/src/app

COPY package*.json ./

Ссылки:

Building a CRUD Application with Node.js, Express, and MongoDB