I want to deploy my full stack application with AWS amplify but doesn't work - deployment

Question

I'm new and learnig React and mySQL. I've just finished my app with React and mySQL(WorkBench) and I'd like to deploy my app with Amplify. I tried to deploy it through my github repo but URL created for app shows 'Page not found'.
(I'm asked to deploy AWS Amplify from company.)
To be honest, I don't know whether my folder composition is correct to deploy and how to deploy full stack app with amplify.(I could deploy SPA app...)
Below link is my app folder structure.
Below is my app.js code(lambda function with Express)
const express = require('express')
const bodyParser = require('body-parser')
const awsServerlessExpressMiddleware = require('aws-serverless-
express/middleware')
const mysql = require('mysql2')
const connection = mysql.createConnection({
host: 'database-1.clw5xqnhqbio.us-east-1.rds.amazonaws.com',
user: 'root',
password: 'Ryotakagi',
database: 'awstaskmanager'
})
const app = express()
app.use(bodyParser.json())
app.use(awsServerlessExpressMiddleware.eventContext())
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "*")
next()
});
app.get('/tasks', (req, res) => {
const TASK_QUERY = "select * from awstaskmanager.tasks"
connection.query(TASK_QUERY, (err, response) => {
if (err) console.log(err);
else res.send(response)
})
})
app.post('/addTask', (req, res) => {
const ADD_QUERY = `insert into awstaskmanager.tasks (task)
values ('${req.body.task}')`
connection.query(ADD_QUERY, (err) => {
if (err) console.log(err);
else res.send('add task')
})
})
app.delete('/deleteTask/:taskid', (req, res) => {
console.log(req.params.taskid);
const DELETE_QUERY = `DELETE FROM awstaskmanager.tasks where
(taskid=${req.params.taskid})`
connection.query(DELETE_QUERY, (err, res) => {
if (err) console.log(err);
})
})
app.listen(3000, function() {
console.log("App started")
});
module.exports = app
Of course, my local environment is correctly working.
I need to submit this app to my company I want to join, so I REALLY want to complete this app...
So, could you tell me the folder structure is right and how to deploy full stack app which is already finished?

Answer 1

You need to convert your node/express server into Lambda function.
Specific server directory is not necessary, since Amplify won't run this server. So you need to move your node/express code into Lambda function you've created.
If you're using MySQL, you can use AWS RDS using AWS SDK
When using Amplify(serverless stack), all your backend should be separated from the project. Amplify Hosting can't run NodeJS server like for example using pm2
so since you've created an Amplify project, you can add Lambda function using amplify add function command and choose Express server.
and copy your node/express code into that and run amplify push
for your frontend, you can access the node/express server using the name you provided when creating a Lambda function. Basically when Lambda function created and deployed (using amplify push command), Amplify CLI stores the API Gateway URL in your project, in aws-exports.js.
EDIT
If you want to have your React app inside client folder, you need to edit build settings, since you need to cd into client and run npm run build
But if your structure would be like this, you don't need to configure.
> amplify
> node_modules
> public
> src
> package.json
...