use env variable to pass backend IP

.github/workflows/deploy_page.yml

@@ -25,6 +25,8 @@ jobs:
 
       - name: Build project
         working-directory: src/frontend/my-app
+        env:
+          REACT_APP_BACKEND_URL: ${{ secrets.VITE_BACKEND_URL }}
         run: npm run build
 
       - name: Upload production-ready build files
@@ -37,7 +39,7 @@ jobs:
     name: Deploy
     needs: build
     runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/dev'  # Upewnij się, że warunek jest zgodny z twoją gałęzią
+    if: github.ref == 'refs/heads/dev'
 
     steps:
       - name: Download artifact

README.md

@@ -33,6 +33,10 @@ To run the package, you have two options depending on your preference:
 
 1. **AWS Deployment:** 
    - First, log in to your AWS account using the AWS Command Line Interface (CLI).
+
+   `aws configure`
+
+
    - Install Terraform on your machine, for example by a command in the terminal:
 
    macOS: 
@@ -50,6 +54,9 @@ To run the package, you have two options depending on your preference:
    - Navigate to the `terraform` directory containing the `main.tf` Terraform configuration file. Choose a version using a Postgres database on AWS RDS or available as a microservice in EC2 with the application.
    - Execute `terraform plan` to review the planned infrastructure changes.
    - Apply these changes by running `terraform apply`.
+
+   `cd terraform/container_db_config && terraform init && terraform plan && terraform apply -auto-approve`
+
    - Use the public IP address in your browser to test the endpoints.
    - After you're done, and if you wish to tear down the infrastructure, use `terraform destroy`.
 

src/frontend/my-app/src/App.jsx

@@ -17,6 +17,9 @@ function App() {
   const [email, setEmail] = useState('');
   const [fullName, setFullName] = useState('');
 
+  // Pobierz URL backendu z zmiennej środowiskowej
+  const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:80';
+
   useEffect(() => {
     if (token) {
       fetchDummies();
@@ -25,7 +28,7 @@ function App() {
 
   const fetchDummies = async () => {
     try {
-      const res = await axios.get('http://localhost:80/dummy', {
+      const res = await axios.get(`${backendUrl}/dummy`, {
         headers: { Authorization: `Bearer ${token}` },
       });
       console.log('Fetched dummies:', res.data);
@@ -52,14 +55,14 @@ function App() {
     try {
       let res;
       if (updateMode) {
-        const url = `http://localhost:80/dummy/${dummyId}`;
+        const url = `${backendUrl}/dummy/${dummyId}`;
         console.log('PUT URL:', url);
         console.log('PUT dummyId:', dummyId);
         res = await axios.put(url, dummyData, {
           headers: { Authorization: `Bearer ${token}` },
         });
       } else {
-        const url = 'http://localhost:80/dummy';
+        const url = `${backendUrl}/dummy`;
         console.log('POST URL:', url);
         res = await axios.post(url, dummyData, {
           headers: { Authorization: `Bearer ${token}` },
@@ -90,7 +93,7 @@ function App() {
 
   const handleDelete = async (id) => {
     try {
-      await axios.delete(`http://localhost:80/dummy/${id}`, {
+      await axios.delete(`${backendUrl}/dummy/${id}`, {
         headers: { Authorization: `Bearer ${token}` },
       });
       fetchDummies();
@@ -102,7 +105,7 @@ function App() {
   const handleLogin = async (e) => {
     e.preventDefault();
     try {
-      const res = await axios.post('http://localhost:80/auth/token', new URLSearchParams({
+      const res = await axios.post(`${backendUrl}/auth/token`, new URLSearchParams({
         username,
         password,
       }));
@@ -125,7 +128,7 @@ function App() {
     console.log('Registering user with data:', userData);
 
     try {
-      const res = await axios.post('http://localhost:80/auth/users/', userData);
+      const res = await axios.post(`${backendUrl}/auth/users/`, userData);
       console.log('User registered successfully:', res.data);
       setRegisterMode(false);
     } catch (err) {

src/frontend/my-app/vite.config.js

@@ -1,15 +1,19 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
 
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    outDir: 'dist',
-  },
-  base: "/vitefast/",
-  server: {
-    proxy: {
-      '/dummy': 'http://localhost:80',
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, import.meta.env.VITE_MODE || '');
+
+  return {
+    plugins: [react()],
+    build: {
+      outDir: 'dist',
+    },
+    base: "/vitefast/",
+    server: {
+      proxy: {
+        '/dummy': env.VITE_BACKEND_URL || 'http://localhost:80',
+      },
     },
-  },
-})
+  };
+});

terraform/container_db_config/main.tf

@@ -161,10 +161,10 @@ resource "aws_iam_role" "ec2_s3_access_role" {
 
 
 resource "aws_s3_bucket" "my_bucket" {
-  bucket = "ozieblomichal-fastapi-template-bucket" 
+  bucket = "ozieblomichal-vitefast-bucket" 
 
   tags = {
-    Name = "MojBucket"
+    Name = "vitefast-bucket"
   }
 }
 
@@ -213,7 +213,7 @@ resource "aws_iam_role" "ec2_cloudwatch_log_role" {
 
 resource "aws_iam_policy" "ec2_cloudwatch_log_policy" {
   name        = "EC2CloudWatchLogPolicy"
-  description = "Polityka umożliwiająca EC2 wysyłanie logów do CloudWatch"
+  description = "Policy enabling EC2 to send logs to CloudWatch"
 
   policy = jsonencode({
     Version = "2012-10-17",
@@ -246,7 +246,7 @@ resource "aws_iam_instance_profile" "ec2_s3_access_profile" {
 
 resource "aws_iam_policy" "ec2_cloudwatch_logs_policy" {
   name        = "EC2CloudWatchLogsPolicy"
-  description = "Polityka umożliwiająca EC2 wysyłanie logów do CloudWatch Logs"
+  description = "Policy enabling EC2 to send logs to CloudWatch Logs"
 
   policy = jsonencode({
     Version = "2012-10-17",
@@ -299,7 +299,7 @@ resource "aws_instance" "my_ec2_instance" {
 
               services:
                 app:
-                  image: ozieblomichal/fastapi-template:latest
+                  image: ozieblomichal/vitefast:latest
                   depends_on:
                     - db
                   ports: