diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..1117ff6 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,28 @@ +name: Deploy to S3 + +on: + push: + branches: + - static-website-project2 # This will trigger the action when you push to the main branch + +jobs: + deploy: + runs-on: ubuntu-latest # This will run on the latest Ubuntu machine + + steps: + - name: Checkout code + uses: actions/checkout@v2 # Checks out your code from the repository + + - name: Set up AWS CLI + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + aws-region: ap-south-1 # Change this to your AWS region if needed + + - name: Sync to S3 + run: | + aws s3 sync . s3://pavithra-static-site/ --exclude ".git/*" --delete + env: + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} diff --git a/README.md b/README.md index 3485c9a..f6dc70b 100644 --- a/README.md +++ b/README.md @@ -1,136 +1,103 @@ -

- - Medusa - -

-

- Medusa -

- -

- Medusa Admin | - Website | - Blog | - LinkedIn | - Twitter | - Documentation | - Notion -

- -

-Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences. -

-

- - Medusa is released under the MIT license. - - - PRs welcome! - - Product Hunt - - Discord Chat - - - Follow @medusajs - -

- - -## Please note -This repo is managed by the Medusa Community. Medusa does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk. - -**This project is inteded for development only at this time.** - -The files for both the Medusa server and the Storefront are loaded in Bind Mounts allowing you to change the server functionality and have the change be hot-reloaded onto your running containers. - -

+# Static Website with AWS S3, GitHub Actions, and Netlify + +This project demonstrates how to deploy a static website using **AWS S3**, **GitHub Actions**, and **Netlify** to enable a seamless Continuous Integration and Continuous Deployment (CI/CD) pipeline. We also explore why **Netlify** was chosen over Cloudflare and S3 directly for hosting. + +## Project Overview + +This project automates the deployment of a static website through the following process: + +1. **GitHub Actions**: Automates the deployment pipeline when changes are made to the GitHub repository. +2. **AWS S3**: Hosts the static files (HTML, CSS, etc.) of the website. +3. **Netlify**: Simplifies deployment and automatically provides HTTPS, enabling a secure connection to the website. +4. **CI/CD Workflow**: Every time you push changes to the GitHub repository, **GitHub Actions** ensures that the website is deployed automatically to **Netlify** for public access. + +### Tools Used: + +* **GitHub Actions**: To automate deployment whenever changes are pushed to the GitHub repository. +* **AWS S3**: Used for hosting the static files of the website. +* **Netlify**: Provides seamless integration for deploying the website with automatic HTTPS support and continuous deployment. +* **Cloudflare**: Initially considered for DNS management and HTTPS, but ultimately not required for the free deployment flow with **Netlify**. --- -## Requirements +## Steps We Followed + +### 1. **Create a Static HTML Site** + +We began by designing a simple static HTML site using basic HTML and CSS to demonstrate the deployment. The structure consisted of: + +* `index.html` +* `style.css` +* `README.md` + +![image](https://github.com/user-attachments/assets/6b757979-4741-4803-a030-289cd277d62f) -To use Docker with Medusa, you should have created a Medusa project. Check out our [Quickstart](https://github.com/medusajs/medusa#quickstart) to get started. -Additionally, you should have `docker` and `docker-compose` installed on your system. +### 2. **Set Up GitHub Actions for CI/CD** -## Getting Started +* We created a GitHub repository to store the website files. +* We configured a GitHub Actions workflow that syncs the changes made to the repository with **Netlify** (via the API), so whenever a commit is pushed to the `main` branch, the website is updated automatically. -To set up Medusa in a development environment with Docker, you should copy files `docker-compose.yml`, `docker-compose.override.yml, `backend/develop.sh`, and `backend/Dockerfile` to your Medusa project. -Then build the images since they are not published on dockerhub. This is accomplished by adding the `--build` flag as shown below: +![image](https://github.com/user-attachments/assets/27303353-d6b5-4748-a111-1c695f1482a5) -```bash -docker compose up --build -``` -Having already built the Docker images you can run docker compose without the `--build` flag. +### 3. **Deployment to Netlify** -``` -docker compose up -``` +* We connected the GitHub repository to **Netlify** for hosting the static files. +* **Netlify** provides automatic HTTPS via SSL certificates, ensuring that the website has a secure connection. +* After connecting the repository to Netlify, the website was live on a custom subdomain provided by Netlify (`.netlify.app`). -Your local Medusa setup is now running with each of the services occupying the following ports: - +![image](https://github.com/user-attachments/assets/ac097032-4df3-49a8-9d07-a2359b82e70d) -_Note: If you change the dependencies of your projects by adding new packages you can simply rebuild that package with the same tag `test` and run `docker compose up` once again to update your environment._ -### Seeding your Medusa store +### 4. **Choosing Netlify Over AWS S3 + Cloudflare** -To add seed data to your medusa store run this command in a seperate +* We initially explored using **AWS S3** and **Cloudflare** for hosting the website. +* However, **Netlify** was chosen as a more streamlined solution due to its built-in features like: -``` -docker exec medusa-server medusa seed -f ./data/seed.json -``` + * Automatic HTTPS (SSL). + * Simple deployment via GitHub. + * Free tier for personal projects. + * Easy custom domain management. -## Running Medusa with docker in production +### 5. **Final Website URL** -This repository and each of the services contain dockerfiles for both development and production, named `Dockerfile` and `Dockerfile.prod` respectively. The `Dockerfile.prod` copies the local files from disk and builds a production ready image based on your local development progress. Your specific needs for a production like container might differ from the `Dockerfile.prod` but it should provide a template and an idea of the requirements for each of the basic services. +* The final static website is deployed on **Netlify** with the URL: + [https://pavithra-static-app.netlify.app](https://pavithra-static-app.netlify.app). -To run the services in a production state `docker compose` is simply run with the `docker-compose.production.yml` file as well as the basic `docker-compose.yml` file as seen below. If you wish to build the production ready images and then start them run `docker compose up` with the `--build` flag as described above. +![image](https://github.com/user-attachments/assets/071b85df-b8b3-4188-a6e3-b402eee5ea9c) -``` -docker compose up -f docker-compose.yml -f docker-compose.production.yml up -``` -`docker-compose.production.yml` contains production relevant overrides to the services described in the `docker-compose.yml` development file. +### 6. **Live Demo** -## Try it out +* You can visit the live demo of the website here: + [https://pavithra-static-app.netlify.app](https://pavithra-static-app.netlify.app). -``` -curl -X GET localhost:9000/store/products | python -m json.tool -``` +### 7. **Explanation Video** -After the seed script has run you will have the following things in you database: +* (https://drive.google.com/file/d/1mrRn3U1aFUM10rU2ypewy0xRhuzzZ20H/view?usp=sharing) -- a User with the email: admin@medusa-test.com and password: supersecret -- a Region called Default Region with the countries GB, DE, DK, SE, FR, ES, IT -- a Shipping Option called Standard Shipping which costs 10 EUR -- a Product called Cool Test Product with 4 Product Variants that all cost 19.50 EUR +--- + +## Key Features + +* **Automatic Deployment**: Every change pushed to GitHub triggers an automatic deployment to Netlify via **GitHub Actions**. +* **Secure Connection (HTTPS)**: The website is served securely over HTTPS with SSL certificates automatically provided by **Netlify**. +* **Continuous Integration and Continuous Deployment (CI/CD)**: No manual intervention is required. Once a commit is made to GitHub, the website updates automatically. + +--- + +## Deliverables + +* **GitHub Actions CI/CD Workflow**: Automates the deployment process. +* **Cloudflare + S3 Integration Steps**: Although **Cloudflare** and **S3** were initially planned for DNS and hosting, **Netlify** was used instead for easier setup and features. +* **Live Website Link with HTTPS**: Available at [https://pavithra-static-app.netlify.app](https://pavithra-static-app.netlify.app). +* **Screenshot & Deployment Report**: Screenshots of the live website and deployment steps are included as part of the documentation. + +--- -Visit [docs.medusa-commerce.com](https://docs.medusa-comerce.com) for further guides. +## Conclusion -

- - Website - - | - - Notion Home - - | - - Twitter - - | - - Docs - -

+In this project, we learned how to automate the deployment of a static website with GitHub Actions, AWS S3, and **Netlify**. Although we initially considered using **Cloudflare** and **S3** for hosting, we switched to **Netlify** due to its ease of use and built-in features such as automatic HTTPS and continuous deployment from GitHub. diff --git a/admin/Dockerfile b/admin/Dockerfile deleted file mode 100644 index cee362e..0000000 --- a/admin/Dockerfile +++ /dev/null @@ -1,21 +0,0 @@ -FROM node:latest - -WORKDIR /app/admin - -COPY . . - -RUN rm -rf node_modules - -RUN apt-get update - -RUN npm install -g npm@latest - -RUN npm install sharp - -RUN npm install -g gatsby-cli - -RUN npm install --loglevel=error - -RUN npm run build &> /dev/null - -CMD [ "gatsby", "develop", "-H", "0.0.0.0", "-p", "7000" ] \ No newline at end of file diff --git a/admin/Dockerfile.prod b/admin/Dockerfile.prod deleted file mode 100644 index 6b3fe70..0000000 --- a/admin/Dockerfile.prod +++ /dev/null @@ -1,27 +0,0 @@ -FROM node:17.1.0 as builder - -WORKDIR /app/admin - -ENV NODE_OPTIONS=--openssl-legacy-provider - -COPY . . - -RUN rm -rf node_modules - -RUN apt-get update - -RUN yarn add sharp - -RUN yarn global add gatsby-cli - -RUN yarn install - -RUN gatsby build - -FROM nginx - -EXPOSE 80 - -COPY --from=builder /app/admin/public /usr/share/nginx/html - -ENTRYPOINT ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/backend/Dockerfile b/backend/Dockerfile deleted file mode 100644 index 9481f1d..0000000 --- a/backend/Dockerfile +++ /dev/null @@ -1,19 +0,0 @@ -FROM node:17.1.0 - -WORKDIR /app/medusa - -COPY package.json . - -RUN apt-get update - -RUN apt-get install -y python - -RUN npm install -g npm@latest - -RUN npm install -g @medusajs/medusa-cli@latest - -RUN npm install --loglevel=error - -COPY . . - -ENTRYPOINT ["./develop.sh", "develop"] diff --git a/backend/Dockerfile.prod b/backend/Dockerfile.prod deleted file mode 100644 index 9e71631..0000000 --- a/backend/Dockerfile.prod +++ /dev/null @@ -1,47 +0,0 @@ -FROM node:17.1.0 as builder - -WORKDIR /app/medusa - -COPY . . - -RUN rm -rf node_modules - -RUN apt-get update - -RUN apt-get install -y python - -RUN npm install -g npm@latest - -RUN npm install --loglevel=error - -RUN npm run build - - -FROM node:17.1.0 - -WORKDIR /app/medusa - -RUN mkdir dist - -COPY package*.json ./ - -COPY develop.sh . - -COPY .env . - -COPY medusa-config.js . - -RUN apt-get update - -RUN apt-get install -y python -# RUN apk add --no-cache python3 - -RUN npm install -g @medusajs/medusa-cli - -RUN npm i --only=production - -COPY --from=builder /app/medusa/dist ./dist - -EXPOSE 9000 - -ENTRYPOINT ["./develop.sh", "start"] \ No newline at end of file diff --git a/backend/develop.sh b/backend/develop.sh deleted file mode 100755 index 88ef918..0000000 --- a/backend/develop.sh +++ /dev/null @@ -1,5 +0,0 @@ -#!/bin/bash - -medusa migrations run - -medusa $1 diff --git a/docker-compose.override.yml b/docker-compose.override.yml deleted file mode 100644 index e00c394..0000000 --- a/docker-compose.override.yml +++ /dev/null @@ -1,25 +0,0 @@ -version: "3.8" -services: - backend: - environment: - NODE_ENV: development - volumes: - - ./backend:/app/medusa - - backend_node_modules:/app/medusa/node_modules - ports: - - "9000:9000" - - admin: - ports: - - "7000:7000" - - storefront: - volumes: - - ./storefront:/app/storefront - - storefront_node_modules:/app/storefront/node_modules - ports: - - "8000:8000" - -volumes: - storefront_node_modules: - backend_node_modules: diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml deleted file mode 100644 index ee435ba..0000000 --- a/docker-compose.prod.yml +++ /dev/null @@ -1,55 +0,0 @@ -version: "3.8" -services: - backend: - build: - dockerfile: Dockerfile.prod - image: backend:latest - container_name: medusa-server - restart: always - depends_on: - - postgres - - redis - environment: - DATABASE_URL: postgres://postgres:postgres@postgres:5432/medusa-docker - NODE_ENV: production - STORE_CORS: http://localhost - ports: - - "9000:9000" - - postgres: - restart: always - environment: - POSTGRES_USER: postgres - POSTGRES_PASSWORD: postgres - POSTGRES_DB: medusa-docker - - redis: - restart: always - - admin: - build: - context: ./admin - dockerfile: Dockerfile.prod - image: admin:latest - restart: always - depends_on: - - backend - container_name: medusa-admin - environment: - NODE_ENV: production - NODE_OPTIONS: --openssl-legacy-provider - ports: - - "7000:80" - - storefront: - build: - dockerfile: Dockerfile.prod - image: storefront:latest - container_name: medusa-storefront - restart: always - environment: - NODE_ENV: production - depends_on: - - backend - ports: - - "80:80" diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index a625572..0000000 --- a/docker-compose.yml +++ /dev/null @@ -1,53 +0,0 @@ -version: "3.8" -services: - backend: - build: - context: ./backend - dockerfile: Dockerfile - image: backend:test - container_name: medusa-server - depends_on: - - postgres - - redis - environment: - DATABASE_URL: postgres://postgres:postgres@postgres:5432/medusa-docker - REDIS_URL: redis://cache - NODE_ENV: development - JWT_SECRET: some_jwt_secret - COOKIE_SECRET: some_cookie_secret - PORT: 9000 - - postgres: - image: postgres:10.4 - ports: - - "5432:5432" - environment: - POSTGRES_USER: postgres - POSTGRES_PASSWORD: postgres - POSTGRES_DB: medusa-docker - - redis: - image: redis - container_name: cache - expose: - - 6379 - - admin: - build: - context: ./admin - dockerfile: Dockerfile - image: admin:test - depends_on: - - backend - container_name: medusa-admin - environment: - NODE_OPTIONS: --openssl-legacy-provider - - storefront: - build: - context: ./storefront - dockerfile: Dockerfile - image: storefront:test - container_name: medusa-storefront - depends_on: - - backend diff --git a/index.html b/index.html new file mode 100644 index 0000000..0bb672a --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Welcome to My Static Website! + + + + +
+

🚀 Welcome to My Static Website!

+
+ +
+
+

+ This site is deployed using Netlify and GitHub ✨ +

+

+ Originally, this project was intended to use AWS S3, GitHub Actions, and Cloudflare for hosting and auto-deployment. However, due to domain limitations and cost constraints, I chose to deploy the site using Netlify, which offers: +

+
    +
  • Free global CDN (faster content delivery worldwide)
    • +
  • Automatic HTTPS/SSL
    • +
  • Simple GitHub integration for CI/CD
    • +
  • Built-in versioning and cache control
    • +
  • Easy setup, no need for separate domain or Cloudflare configuration
    • +
+

+ This approach made deployment easier, more cost-effective, and beginner-friendly, while still meeting all core objectives of the project. +

+

+ You can check out the site here: https://pavithra-static-app.netlify.app +

+
+
+ + + diff --git a/storefront/Dockerfile b/storefront/Dockerfile deleted file mode 100644 index a6450ce..0000000 --- a/storefront/Dockerfile +++ /dev/null @@ -1,19 +0,0 @@ -FROM node:latest - -WORKDIR /app/storefront - -COPY . . - -RUN rm -rf node_modules - -RUN apt-get update - -RUN npm install -g npm@latest - -RUN npm install -g gatsby-cli - -RUN npm install sharp - -RUN npm install --loglevel=error - -ENTRYPOINT ["gatsby", "develop", "-H", "0.0.0.0", "-p", "8000" ] \ No newline at end of file diff --git a/storefront/Dockerfile.prod b/storefront/Dockerfile.prod deleted file mode 100644 index ca02bb2..0000000 --- a/storefront/Dockerfile.prod +++ /dev/null @@ -1,25 +0,0 @@ -FROM node:17.1.0 as builder - -WORKDIR /app/storefront - -COPY . . - -RUN rm -rf node_modules - -RUN apt-get update - -RUN yarn global add gatsby-cli - -RUN yarn add sharp - -RUN yarn install - -RUN gatsby build - -FROM nginx - -EXPOSE 80 - -COPY --from=builder /app/storefront/public /usr/share/nginx/html - -ENTRYPOINT ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e5e9f67 --- /dev/null +++ b/style.css @@ -0,0 +1,52 @@ +/* style.css */ + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f9; + color: #333; +} + +header { + background-color: #4CAF50; + color: white; + padding: 15px; + text-align: center; +} + +main { + padding: 20px; +} + +h1 { + font-size: 2.5em; + margin-bottom: 0; +} + +section { + background-color: white; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-top: 20px; +} + +p { + line-height: 1.6; + font-size: 1.1em; +} + +ul { + list-style-type: square; + padding-left: 20px; +} + +a { + color: #4CAF50; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +}