introduce docker compose and aws integration

.github/workflows/deploy-aws.yml

@@ -0,0 +1,27 @@
+name: Deploy React-docker-aws-cicd app to AWS
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v2
+
+      - name: Generate deployment package
+        run: zip -r deploy.zip . -x '*.git*'
+
+      - name: Deploy to EB
+        uses: einaregilsson/beanstalk-deploy@v21
+        with:
+          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          application_name: react-docker-aws-cicd
+          environment_name: React-aws-docker-cicd-env
+          version_label: ${{ github.sha }}
+          existing_bucket_name: elasticbeanstalk-us-east-1-976363746073
+          region: us-east-1
+          deployment_package: deploy.zip

Dockerfile

@@ -1,5 +1,5 @@
 # Use a specific version of Node.js
-FROM node:16.13.1-alpine
+FROM node:16.13.1-alpine as builder
 
 # Set the working directory in the container
 WORKDIR /app
@@ -16,8 +16,15 @@ COPY . .
 # Build the React app
 RUN npm run build
 
-# Expose port 3000 to the outside world
-EXPOSE 3000
+FROM nginx
 
-# Define the command to run your app
-CMD ["npm", "start"]
+# Expose port 80 to the outside world
+EXPOSE 80
+
+# Copy the built React app to the Nginx html directory
+COPY --from=builder /app/build /usr/share/nginx/html
+
+# Start Nginx in the foreground
+# CMD ["nginx", "start"] This command is typically used to start a development server using npm start. However, since you're using Nginx to serve the built React app, you don't need to run npm start
+
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,8 @@
+version: '1'
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "80:80"

src/App.js

@@ -7,7 +7,7 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Bookstore - React 
+          Bookstore - React - 1.1
         </p>
 
       </header>