frontend inicial

.github/playbooks/cd.yml

@@ -1,5 +1,5 @@
 # USAGE:
-# ansible-playbook -i inventory.ini cd_playbook.yml \
+# ansible-playbook -i inventory.ini cd.yml \
 #   --extra-vars "branch=main
 #                 django_secret_key='django-insecure-0o@o1g#=*z^aux@mb@)&50%=2k+)5y6w@u8^np5tn1lv)s=qm8'
 #                 superuser_email='super'
@@ -124,6 +124,7 @@
         cmd: |
           echo "\
           SERVER_NAME={{ server_name | quote }}
+          BACKEND_URL='https://{{ server_name }}/api'
           " | sudo tee {{ repo_root }}/.envs/production/server_name
 
     #TODO: maybe replace 'ansible.builtin.shell' with 'community.docker.docker_compose'

README.md

@@ -71,6 +71,13 @@ Buildar e rodar o web app.
 docker compose -f docker-compose-local.yml up --build
 ```
 
+Links:
+* Frontend: http://0.0.0.0:3000
+* Backend: http://localhost:8000
+* Backend admin: http://localhost:8000/admin 
+* Postgres: localhost:5432
+
+Conforme definido nas "env files" presentes na pasta [".envs/local"](/.envs/local), o usuário padrão do backend admin é "super" e senha padrão é "senha12345". Esse usuário e senha padrões são diferentes dos utilizados no ambiente de produção.
 
 ## Equipe :mortar_board:
 

backend/core/settings/local.py

@@ -10,8 +10,7 @@
 SECRET_KEY = 'django-insecure-0o@o1g#=*z^aux@mb@)&50%=2k+)5y6w@u8^np5tn1lv)s=qm8'
 DEBUG = env.bool("DJANGO_DEBUG", True)
 
-ALLOWED_HOSTS = ["localhost", "0.0.0.0", "127.0.0.1"]
-
+ALLOWED_HOSTS = ["localhost", "0.0.0.0", "127.0.0.1", "backend"]
 
 
 # LOGGING

backend/core/settings/production.py

@@ -41,6 +41,16 @@
     "www." + env("SERVER_NAME"),
 ]
 
+EXTRA_HTPP_HOSTNAME = env("EXTRA_HTPP_HOSTNAME", default=None)
+if EXTRA_HTPP_HOSTNAME is not None:
+    ALLOWED_HOSTS.append(EXTRA_HTPP_HOSTNAME)
+    CSRF_TRUSTED_ORIGINS.append("http://" + EXTRA_HTPP_HOSTNAME)
+
+EXTRA_HTPPS_HOSTNAME = env("EXTRA_HTPPS_HOSTNAME", default=None)
+if EXTRA_HTPPS_HOSTNAME is not None:
+    ALLOWED_HOSTS.append(EXTRA_HTPPS_HOSTNAME)
+    CSRF_TRUSTED_ORIGINS.append("https://" + EXTRA_HTPPS_HOSTNAME)
+
 # ADMIN
 # ------------------------------------------------------------------------------
 # Django Admin URL regex.

docker-compose-local.yml

@@ -1,6 +1,7 @@
 version: '3'
 
 volumes:
+  frontend_build: {}
   americanas_local_postgres_data: {}
   americanas_local_postgres_data_backups: {}
 
@@ -27,8 +28,25 @@ services:
       - '8000:8000'
     networks:
       - database-access
+      - backend-access
 
-  # TODO: frontend service
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: ./Dockerfile.local
+    image: americanas_local_frontend
+    container_name: americanas_local_frontend
+    restart: "always"
+    depends_on:
+      - backend
+    volumes:
+      - frontend_build:/frontend/dist:rw
+    environment:
+      - BACKEND_URL="http://backend:8000"
+    ports:
+      - '3000:3000'
+    networks:
+      - backend-access
 
   postgres:
     build:
@@ -42,10 +60,14 @@ services:
       - americanas_local_postgres_data_backups:/backups:rw
     env_file:
       - ./.envs/local/postgres
+    ports:
+      - '5432:5432'
     networks:
       - database-access
 
 
 networks:
   database-access:
     driver: bridge
+  backend-access:
+    driver: bridge

docker-compose.yml

@@ -1,6 +1,7 @@
 version: '3'
 
 volumes:
+  frontend_build: {}
   americanas_production_certbot_www: {}
   americanas_production_certbot_conf: {}
 
@@ -15,14 +16,29 @@ services:
     restart: "always"
     environment:
       - DJANGO_SETTINGS_MODULE=core.settings.production
+      # - EXTRA_HTPP_HOSTNAME=backend
     env_file:
       - ./.envs/production/django
       - ./.envs/production/postgres
       - ./.envs/production/server_name
     networks:
       - nginx-access
 
-  # TODO: frontend service
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: ./Dockerfile
+    image: americanas_production_frontend
+    container_name: americanas_production_frontend
+    restart: "no"
+    depends_on:
+      - backend
+    volumes:
+      - frontend_build:/frontend/dist:rw
+    env_file:
+      - ./.envs/production/server_name
+    networks:
+      - nginx-access
 
   nginx:
     build:
@@ -31,6 +47,8 @@ services:
     image: americanas_production_nginx
     container_name: americanas_production_nginx
     restart: "always"
+    environment:
+      - FRONTEND_BUILD=/var/www/frontend
     depends_on:
       - backend
     env_file:
@@ -42,7 +60,7 @@ services:
     networks:
       - nginx-access
     volumes:
-      # ":ro" means "read-only"
+      - frontend_build:/var/www/frontend:ro
       - americanas_production_certbot_www:/var/www/certbot/:ro
       - americanas_production_certbot_conf:/etc/nginx/ssl/:ro
     healthcheck:
@@ -66,10 +84,9 @@ services:
       - ./.envs/production/server_name
       - ./.envs/production/email
     volumes:
-      # ":rw" stands for "read and write"
       - americanas_production_certbot_www:/var/www/certbot/:rw
       - americanas_production_certbot_conf:/etc/letsencrypt/:rw
 
 networks:
   nginx-access:
-    driver: bridge
+    driver: bridge

frontend/.gitignore

@@ -0,0 +1 @@
+node_modules/

frontend/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20.10-alpine
+
+WORKDIR /frontend
+
+COPY package-lock.json .
+COPY package.json .
+COPY tsconfig.json .
+COPY tsconfig.node.json .
+COPY vite.config.ts .
+
+RUN npm install
+# TODO: RUN npm install --omit=dev
+ENV PATH="/frontend/node_modules/.bin:$PATH"
+
+COPY src src
+COPY index.html .
+
+COPY start.sh ./start.sh
+RUN chmod +x ./start.sh
+CMD ./start.sh

frontend/Dockerfile.local

@@ -0,0 +1,19 @@
+FROM node:20.10-alpine
+
+WORKDIR /frontend
+
+COPY package-lock.json .
+COPY package.json .
+COPY tsconfig.json .
+COPY tsconfig.node.json .
+COPY vite.config.ts .
+
+RUN npm install
+ENV PATH="/frontend/node_modules/.bin:$PATH"
+
+COPY src src
+COPY index.html .
+
+COPY start.local.sh ./start.local.sh
+RUN chmod +x ./start.local.sh
+CMD ./start.local.sh

frontend/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/src/favicon.ico" sizes="16x16" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Americanas</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto&family=Hind%20Madurai:wght@400;700&display=swap">
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>