Added BASE_PATH build variable for JS App

module2/08_docker_containerization_advanced/tasks.md

@@ -47,7 +47,13 @@
   нужно вызывать `npm install` - это команда скачает зависимости приложения.
 - После этого, в этой же директории необходимо выполнить команду `npm run build`, в результате чего,
   в этой директории появится директория `wwwroot`, содержащая файл `index.html`,
-  результирующий код на JS, а также его ресурсы, такие как картинки и файлы стилей(css).
+  результирующий код на JS, а также его ресурсы, такие как картинки и файлы стилей(css). \
+  Перед выполнением этой команды, также можно установить переменную среды `BASE_PATH`, в значение, \
+  являющееся префиксом в пути URL, по которому приложение будет находится. По умолчанию, `BASE_PATH` \
+  трактуется как имеющее значение `/`, таким образом приложение должно раздаваться веб-сервером из корня сайта. \
+  Если же вы хотите, чтобы приложение находилось например по адресу `http://<домен>/todo/`, тогда необходимо \
+  установить `BASE_PATH` в значение `/todo/` соответственно. Для установки переменной среды, доступной во время \
+  сборки образа, используйте директиву `ARG` внутри докер-файла(и соответственно опцию `--build-arg` при вызове `docker build`).
 
 Для запуска `JavaScript` приложения `NodeJS` не нужен, достаточно лишь любого веб-сервера, и в
 нашем случае, в API-сервисе такой имеется(он называется `Kestrel`). Для хостинга JS-приложения в API-сервисе, необходимо всего лишь скопировать упомянутую выше директорию `wwwroot` внутрь результирующей директории API-сервиса(которая получается после выполнения `dotnet publish ...`).

module2/08_docker_containerization_advanced/todo_app/todo_ui/src/services/todoService.js

@@ -2,6 +2,8 @@ import axios from 'axios'
 
 const TIMEOUT_MS = 5000
 
+const BASE_URL = import.meta.env.BASE_URL ?? '/';
+
 function send(method, url, {params, data} = {}) {
   return axios({
     method,
@@ -14,7 +16,7 @@ function send(method, url, {params, data} = {}) {
 
 export default {
   async getAll({search, skip, take, completed} = {}) {
-    let result = await send('GET', '/api/todo', {
+    let result = await send('GET', `${BASE_URL}api/todo`, {
       params: {
         search,
         skip,
@@ -25,11 +27,11 @@ export default {
     return result.data
   },
   async status() {
-    let result = await send('GET', '/api/todo/status')
+    let result = await send('GET', `${BASE_URL}api/todo/status`)
     return result.data
   },
   async create(description) {
-    let result = await send('POST', '/api/todo', {
+    let result = await send('POST', `${BASE_URL}api/todo`, {
       data: {
         description
       }
@@ -37,7 +39,7 @@ export default {
     return result.data
   },
   async toggle(isCompleted, ids = []) {
-    let result = await send('POST', '/api/todo/toggle', {
+    let result = await send('POST', `${BASE_URL}api/todo/toggle`, {
       data: {
         isCompleted,
         ids
@@ -46,11 +48,11 @@ export default {
     return result.data
   },
   async delete(id) {
-    let result = await send('DELETE', `/api/todo/${id}`)
+    let result = await send('DELETE', `${BASE_URL}api/todo/${id}`)
     return result.data
   },
   async deleteCompleted() {
-    let result = await send('DELETE', '/api/todo/completed')
+    let result = await send('DELETE', `${BASE_URL}api/todo/completed`)
     return result.data
   }
 }

module2/08_docker_containerization_advanced/todo_app/todo_ui/vite.config.js

@@ -1,4 +1,5 @@
 import * as path from 'node:path'
+import * as process from 'node:process'
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -18,6 +19,7 @@ export default defineConfig({
   build: {
     outDir: path.resolve(currentDir, 'wwwroot')
   },
+  base: (process.env.BASE_PATH.replace(/\/$/, '') ?? '') + '/',
   server: {
     port: 8080,
     hot: true,