Skip to content

Commit 2feb44e

Browse files
hppanpaliyahppanpaliya
authored
Merge pull request #11 from hppanpaliya/react-inject-env
Optimize Docker setup and build process
2 parents 8c493c0 + f90bba3 commit 2feb44e

File tree

18 files changed

+3965
-3249
lines changed

18 files changed

+3965
-3249
lines changed

‎.github/workflows/build.yml

Lines changed: 98 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,98 @@
1-
# name: remote ssh command
2-
# on: [push]
3-
# jobs:
4-
5-
# build:
6-
# name: Build React on remote server
7-
# runs-on: ubuntu-latest
8-
# steps:
9-
# - name: executing remote ssh commands using password
10-
# uses: appleboy/ssh-action@v1.0.0
11-
# with:
12-
# host: ${{ secrets.HOST }}
13-
# username: ${{ secrets.USERNAME }}
14-
# password: ${{ secrets.PASSWORD }}
15-
# port: ${{ secrets.PORT }}
16-
# script: |
17-
# rm -r /home/harshal/React-TrashMail/mailserver/build
18-
# cd /home/harshal/React-TrashMail/react && yarn && yarn build
1+
name: Build React App and Docker Image
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
env:
9+
DOCKER_REPOSITORY: hppanpaliya/react-trashmail
10+
11+
jobs:
12+
build-and-push:
13+
runs-on: ubuntu-latest
14+
strategy:
15+
fail-fast: false
16+
matrix:
17+
platform: [linux/amd64, linux/arm64]
18+
19+
steps:
20+
- name: Checkout repository
21+
uses: actions/checkout@v4
22+
23+
- name: Set up Node.js
24+
uses: actions/setup-node@v3
25+
with:
26+
node-version: '18'
27+
28+
- name: Install React dependencies
29+
run: yarn install --frozen-lockfile
30+
working-directory: ./react
31+
32+
- name: Build React app
33+
run: yarn build
34+
working-directory: ./react
35+
36+
- name: Delete node_modules from React app
37+
run: rm -rf ./node_modules
38+
working-directory: ./react
39+
40+
- name: Install Mailserver dependencies
41+
run: yarn install --frozen-lockfile
42+
working-directory: ./mailserver
43+
44+
- name: Set up Docker Buildx
45+
uses: docker/setup-buildx-action@v3
46+
47+
- name: Log in to Docker Hub
48+
uses: docker/login-action@v3
49+
with:
50+
username: ${{ secrets.DOCKER_HUB_USERNAME }}
51+
password: ${{ secrets.DOCKER_HUB_TOKEN }}
52+
53+
- name: Extract platform short name
54+
id: platform
55+
run: |
56+
if [[ "${{ matrix.platform }}" == "linux/amd64" ]]; then
57+
echo "short=amd64" >> $GITHUB_OUTPUT
58+
elif [[ "${{ matrix.platform }}" == "linux/arm64" ]]; then
59+
echo "short=arm64" >> $GITHUB_OUTPUT
60+
fi
61+
62+
- name: Build and push Docker image
63+
uses: docker/build-push-action@v6
64+
with:
65+
context: .
66+
file: Dockerfile.prod
67+
platforms: ${{ matrix.platform }}
68+
push: true
69+
tags: |
70+
${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}
71+
${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-${{ steps.platform.outputs.short }}
72+
73+
merge:
74+
runs-on: ubuntu-latest
75+
needs: build-and-push
76+
77+
steps:
78+
- name: Set up Docker Buildx
79+
uses: docker/setup-buildx-action@v3
80+
81+
- name: Log in to Docker Hub
82+
uses: docker/login-action@v3
83+
with:
84+
username: ${{ secrets.DOCKER_HUB_USERNAME }}
85+
password: ${{ secrets.DOCKER_HUB_TOKEN }}
86+
87+
- name: Create and push Docker manifest
88+
run: |
89+
docker buildx imagetools create \
90+
--tag ${{ env.DOCKER_REPOSITORY }}:latest \
91+
--tag ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }} \
92+
${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-amd64 \
93+
${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-arm64
94+
95+
- name: Inspect image
96+
run: |
97+
docker buildx imagetools inspect ${{ env.DOCKER_REPOSITORY }}:latest
98+
docker buildx imagetools inspect ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}

‎.github/workflows/test.yml

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎Dockerfile

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,39 @@ RUN apt-get update && \
1111
RUN npm install -g yarn
1212

1313
# Install pm2 globally
14-
RUN npm install -g pm2
14+
RUN yarn global add pm2
1515

16-
# Copy in package.json files and run install to allow docker to cache themc
16+
# Copy in package.json files and run install to allow docker to cache them
1717
COPY react/package.json /React-TrashMail/react/
18+
COPY react/yarn.lock /React-TrashMail/react/
1819
WORKDIR /React-TrashMail/react
19-
RUN yarn
20+
RUN yarn install
21+
2022
COPY mailserver/package.json /React-TrashMail/mailserver/
23+
COPY mailserver/yarn.lock /React-TrashMail/mailserver/
2124
WORKDIR /React-TrashMail/mailserver
22-
RUN yarn
25+
RUN yarn install
2326

27+
# Copy the rest of the application code
2428
COPY . /React-TrashMail
2529

30+
WORKDIR /React-TrashMail/react
31+
RUN yarn build
32+
RUN rm -rf ../mailserver/build/* && mkdir -p ../mailserver/build && cp -r build/* ../mailserver/build/
33+
2634
# Define mountable volume
2735
VOLUME ["/React-TrashMail/mailserver/attachments"]
2836

2937
# Copy startup script
3038
COPY docker_start.sh /docker_start.sh
3139
RUN chmod +x /docker_start.sh
3240

41+
# Set the health check
42+
COPY healthcheck.sh /healthcheck.sh
43+
RUN chmod +x /healthcheck.sh
44+
45+
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
46+
CMD /healthcheck.sh
47+
3348
# Set the command to start the application using the startup script
3449
CMD ["/docker_start.sh"]

‎Dockerfile.prod

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Start with the official MongoDB image
2+
FROM mongo:latest
3+
4+
# Install Node.js and Git
5+
RUN apt-get update && \
6+
apt-get install -y curl gnupg git && \
7+
curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
8+
apt-get install -y nodejs
9+
10+
# Install yarn globally
11+
RUN npm install -g yarn
12+
13+
# Install pm2 globally
14+
RUN yarn global add pm2
15+
16+
# Copy in mailserver dependencies
17+
COPY mailserver/package.json /React-TrashMail/mailserver/
18+
COPY mailserver/yarn.lock /React-TrashMail/mailserver/
19+
COPY mailserver/node_modules /React-TrashMail/mailserver/node_modules
20+
21+
# Copy the rest of the application code
22+
COPY . /React-TrashMail
23+
24+
# Copy built React app to mailserver build directory
25+
COPY react/build /React-TrashMail/mailserver/build
26+
27+
# Define mountable volume
28+
VOLUME ["/React-TrashMail/mailserver/attachments"]
29+
30+
# Copy startup script
31+
COPY docker_start.sh /docker_start.sh
32+
RUN chmod +x /docker_start.sh
33+
34+
# Set the health check
35+
COPY healthcheck.sh /healthcheck.sh
36+
RUN chmod +x /healthcheck.sh
37+
38+
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
39+
CMD /healthcheck.sh
40+
41+
# Set the command to start the application using the startup script
42+
CMD ["/docker_start.sh"]

‎docker_start.sh

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ if [ ! -f "$FIRST_RUN_FLAG" ]; then
1515

1616
pm2-runtime stop yarn -- start
1717

18-
# Build the React project
18+
# Set environment variables in react
1919
cd /React-TrashMail/react
20-
yarn run build
20+
21+
npx react-inject-env set
22+
mv ./build/env.js ../mailserver/build/
2123

2224
# Create the flag file to indicate completion of first run
2325
touch "$FIRST_RUN_FLAG"
2426
fi
2527

2628
# Start the application
2729
cd /React-TrashMail/mailserver
28-
PM2_HOME=/React-Trashmail/mailserver pm2-runtime start yarn -- start:docker
30+
PM2_HOME=/React-TrashMail/mailserver pm2-runtime start yarn -- start:docker

‎healthcheck.sh

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/bash
2+
3+
# Check MongoDB
4+
if ! mongosh --eval "db.adminCommand('ping')" > /dev/null 2>&1; then
5+
echo "MongoDB is down"
6+
exit 1
7+
fi
8+
9+
# Check Backend
10+
if ! curl -f http://localhost:4000/ > /dev/null 2>&1; then
11+
echo "Backend is down"
12+
exit 1
13+
fi
14+
15+
echo "All services are running"
16+
exit 0

‎mailserver/README.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
I apologize for the duplicated response. Here's the corrected version of the README file:
2-
31
# Mail Server
42

53
This is a Node.js-based mail server that provides SMTP (Simple Mail Transfer Protocol) and web server functionality. The server allows users to receive emails and store them in a MongoDB database. It also provides routes for retrieving and managing emails and their attachments.

‎react/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
},
2222
"scripts": {
2323
"start": "react-scripts start",
24-
"build": "react-scripts build && mv build/ ../mailserver/",
24+
"build": "react-scripts build",
2525
"test": "react-scripts test",
2626
"eject": "react-scripts eject"
2727
},
@@ -44,6 +44,7 @@
4444
]
4545
},
4646
"devDependencies": {
47-
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
47+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
48+
"react-inject-env": "^2.1.0"
4849
}
4950
}

‎react/public/favicon.ico

32.3 KB
Binary file not shown.

‎react/public/index.html

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<!--
1917
Notice the use of %PUBLIC_URL% in the tags above.
2018
It will be replaced with the URL of the `public` folder during the build.
2119
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
2422
work correctly both with client-side routing and a non-root public URL.
2523
Learn how to configure a non-root public URL by running `npm run build`.
2624
-->
27-
<title>TrashMail</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
25+
<title>TrashMail</title>
26+
<script src='/env.js'></script>
27+
</head>
28+
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
3333
This HTML file is a template.
3434
If you open it directly in the browser, you will see an empty page.
3535
@@ -39,5 +39,6 @@
3939
To begin the development, run `npm start` or `yarn start`.
4040
To create a production bundle, use `npm run build` or `yarn build`.
4141
-->
42-
</body>
43-
</html>
42+
</body>
43+
44+
</html>

0 commit comments

Comments
 (0)