first commit

.github/workflows/deploy.yaml

@@ -0,0 +1,27 @@
+name: Deploy Frontend
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+      - run: docker build -t ksspam/react-test -f Dockerfile.dev .
+      - run: docker run -e CI=true ksspam/react-test npm test
+
+      - name: Generate deployment package
+        run: zip -r deploy.zip . -x '*.git*'
+
+      - name: Deploy to EB
+        uses: einaregilsson/beanstalk-deploy@v18
+        with:
+          application_name: docker
+          environment_name: Docker-env
+          existing_bucket_name: elasticbeanstalk-ap-south-1-443370700977
+          region: ap-south-1
+          version_label: ${{ github.sha }}
+          deployment_package: deploy.zip

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:lts-alpine3.18 as build_stage
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN ["npm", "install"]
+
+COPY . .
+
+RUN ["npm", "run", "build"]
+
+
+FROM nginx:alpine3.19
+
+COPY --from=build_stage /app/build /usr/share/nginx/html

Dockerfile.dev

@@ -0,0 +1,11 @@
+FROM node:lts-alpine3.18
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+CMD ["npm", "run", "start"]

docker-compose-dev.yml

@@ -0,0 +1,21 @@
+version: "3.0"
+
+services:
+  react-app:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "3001:3000"
+    volumes:
+      - /app/node_modules
+      - .:/app/
+
+  react-app-test:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    volumes:
+      - /app/node_modules
+      - .:/app/
+    command: ["npm", "run", "test"]

docker-compose.yml

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

src/App.js

@@ -15,7 +15,7 @@ function App() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          Learn React and Docker Too
         </a>
       </header>
     </div>