Astro Starter Kit: Minimal

npm create astro@latest -- --template minimal

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.

ooodmdk

Docker Деплой

Проект настроен для деплоя через Docker с последующей настройкой Nginx через Timeweb Cloud.

Подготовка к деплою

1. Создайте файл .env на основе .env.example:

   cp .env.example .env
   

   Отредактируйте при необходимости переменные окружения.

2. Синхронизируйте package.json и package-lock.json:

   npm install
   

Локальное использование

1. Убедитесь, что у вас установлены Docker и Docker Compose
2. Выполните сборку и запуск контейнеров:

   docker-compose up -d
   

3. Приложение будет доступно по адресу http://localhost:4321

Деплой на Timeweb Cloud

1. При деплое через Timeweb Cloud:

   • Используется один Dockerfile для сборки приложения
   • Приложение работает на порту 4321
   • Timeweb Cloud автоматически настраивает Nginx для проксирования запросов
   • Для запуска приложения используется entrypoint.sh скрипт, который помогает диагностировать проблемы

2. Выполните деплой через панель управления Timeweb Cloud:

   • Создайте новый проект Docker
   • Загрузите код проекта
   • Установите переменные окружения в панели управления:
     • HOST=0.0.0.0
     • PORT=4321
     • PUBLIC_SANITY_PROJECT_ID=hngg8xd3
     • PUBLIC_SANITY_DATASET=production

3. В случае ошибок используйте скрипт debug.sh для диагностики:

   ./debug.sh
   

Решение проблемы CSS/стилей

Если вы сталкиваетесь с проблемой отсутствия стилей при деплое:

1. Убедитесь, что в проекте есть директория src/styles:

   mkdir -p src/styles
   

2. Проверьте наличие файла src/styles/tailwind.css с содержимым:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

3. Удостоверьтесь, что в src/layouts/Layout.astro импортируются стили:

   import "../styles/tailwind.css";
   

4. При ручном деплое рекомендуется очистить кэш и перестроить проект:

   npm run build && docker-compose build --no-cache
   

Решение проблемы 502 Bad Gateway

Если вы сталкиваетесь с ошибкой 502 Bad Gateway при деплое:

1. Убедитесь, что приложение корректно запускается в контейнере:

   docker compose exec app wget -O- http://localhost:4321/
   

2. Проверьте логи для выявления ошибок:

   docker compose logs app
   

3. Убедитесь, что переменные окружения правильно настроены:

   • В Timeweb Cloud панели
   • В Dockerfile
   • В docker-compose.yml

Деплой на собственный сервер

1. Настройте параметры в файле deploy.sh:

   • SERVER_USER - имя пользователя на сервере
   • SERVER_IP - IP-адрес сервера
   • APP_PATH - путь к директории приложения на сервере

2. Запустите скрипт деплоя:

   ./deploy.sh
   

Отладка проблем

Если возникают проблемы при деплое (особенно 502 Bad Gateway):

1. Запустите скрипт отладки:

   ./debug.sh
   

2. Проверьте логи контейнеров для выявления ошибок

3. Убедитесь, что приложение доступно внутри контейнера на порту 4321

Деплой на Vercel

Автоматический деплой через GitHub

1. Создайте репозиторий на GitHub и загрузите код проекта

2. Зарегистрируйтесь на Vercel и создайте новый проект:

   • Выберите "Import Git Repository"
   • Подключите свой репозиторий GitHub
   • При настройке проекта выберите фреймворк "Astro"
   • Добавьте переменные окружения:
     • PUBLIC_SANITY_PROJECT_ID=hngg8xd3
     • PUBLIC_SANITY_DATASET=production

3. Нажмите "Deploy" и ожидайте завершения деплоя

Деплой через Vercel CLI

1. Установите Vercel CLI:

   npm i -g vercel
   

2. Авторизуйтесь:

   vercel login
   

3. Запустите деплой из корня проекта:

   vercel
   

4. Следуйте инструкциям в командной строке:

   • Подтвердите настройки проекта
   • Добавьте переменные окружения, когда будет предложено

Настройка переменных окружения

В Vercel необходимо настроить следующие переменные окружения:

• PUBLIC_SANITY_PROJECT_ID=hngg8xd3
• PUBLIC_SANITY_DATASET=production

Преимущества Vercel

• Автоматический CI/CD при пуше в репозиторий
• Бесплатное SSL-шифрование
• Глобальная CDN сеть для быстрой загрузки
• Предпросмотр для каждой ветки/PR
• Бесплатная квота для небольших проектов