Signed-off-by: Max Schmidt <max.schmidt@outlook.de>
This commit is contained in:
Max Schmidt 2023-05-19 13:06:28 +02:00
parent 3aacabbb2c
commit 1645190643
2 changed files with 36 additions and 4 deletions

View File

@ -4,6 +4,39 @@ Astroad is a pre-configured setup for Astro and Payloadcms that makes it easy to
When you're ready to deploy the website on your own server, Astrotus comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website. When you're ready to deploy the website on your own server, Astrotus comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.
## Prerequisites
Before getting started with Astroad, make sure you have the necessary software installed:
- Docker
- Node.js
- Yarn
## Configuration
While there's no configuration necessary for local development, deployment via Github Workflows requires specific secrets and variables to be set.
Secrets:
- USER: User on the server
- HOST: IP or URL of the server
- KEY: SSH KEY for connecting to the server
- MONGODB_PW: Password for MongoDB
- MONGODB_USER: User for MongoDB
- PATH: Path where the repository resides on the server
- PAYLOAD_PORT: Port at which Payload listens
- PAYLOAD_SECRET: String to encrypt Payload data
- TOKEN: Github Access Token for the webhook to trigger the payload.yml workflow and execute a new Astro build
Variables:
- ASTRO_URL: URL of the Frontend
- PAYLOAD_URL: URL of the CMS
- NAME: Name of the Container and Project
Please remember to set these secrets and variables in your repository settings to ensure a successful deployment through Github Workflows.
Once the secrets and variables are set on GitHub, they will replace the existing ones in the .env file on the server during deployment. This is done by the push.yml workflow, which replaces the placeholders in the .env with the actual secrets and variables defined in the repository settings. Please ensure that the names of your secrets and variables match with the placeholders in the .env file.
## Getting started ## Getting started
To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine. To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.
@ -20,9 +53,8 @@ The `docker-compose.yml` and `docker-compose-dev.yml` files includes everything
## Deployment ## Deployment
Deployment is handled by a Github Actions Workflow on every push on branch `prod`. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs `yarn prod`. Deployment is handled by a Github Actions Workflow on every push. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs `yarn prod`.
Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, theres a `payload.yml` workflow that gets triggered by a webhook after every content change from Payload. Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, theres a `payload.yml` workflow that gets triggered by a webhook after every content change from Payload.
Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment. Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment.
Please note that since deployment is done through Github Workflows, you need to define the necessary secrets and envs in the settings. You can find which secrets and envs are used in the `.github/workflows/push.yml` file. This file adds the secrets and envs to the `.env` that have already been defined.

View File

@ -24,7 +24,7 @@ const posts = await getPosts();
<div class="flex gap-4 mt-3 flex-wrap"> <div class="flex gap-4 mt-3 flex-wrap">
{ {
posts.length > 0 ? ( posts.length > 0 ? (
posts.reverse().map((post) => ( posts.map((post) => (
<a href={`/posts/${post.id}`}> <a href={`/posts/${post.id}`}>
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform"> <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3>{post.title}</h3> <h3>{post.title}</h3>