Projecte full-stack: React + Node Express + MySQL. Desplegament

De wikijoan
La revisió el 11:39, 25 abr 2022 per Joan (discussió | contribucions) (Es crea la pàgina amb «=Introducció= thumbnail Versió antiga del tutorial: *React + Node.js + Express + MySQL example: Build a CRUD App...».)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Salta a la navegació Salta a la cerca

Introducció

Tutorials react express mysql.png

Versió antiga del tutorial:

És un tutorial full stack. Es tracta de crear una aplicació amb React (front-end) i Node (back-end, API), que crea un CRUD per inserir en la taula tutorials (MySQL) una llista de tutorials.

Per aconseguir aquest objectiu hi ha diferents opcions. Entre les diferents opcions nosaltres farem:

I per al back-end tenim:

Instal·lació en local

Instal·lació del back-end

Primer comencem amb el back-end

$ git clone https://github.com/bezkoder/nodejs-express-mysql $ cd nodejs-express-mysql/

El primer que haurem de fer és configurar la connexió a la base de dades:

$ joe app/config/db.config.js

module.exports = {
  HOST: "localhost",
  USER: "root",
  PASSWORD: "*******",
  DB: "balmes"
};

L'aplicació utilitzarà la taula tutorials, que en aquesta versió del tutorial s'haurà de crear manualment:

CREATE TABLE IF NOT EXISTS `tutorials` (
`id` INTEGER NOT NULL auto_increment ,
`title` VARCHAR(255),
`description` VARCHAR(255),
`published` TINYINT(1),
`createdAt` DATETIME NOT NULL DEFAULT NOW(),
`updatedAt` DATETIME NOT NULL DEFAULT NOW(),
PRIMARY KEY (`id`)
) ENGINE=InnoDB;

I ara ja podem arrencar el servei:

$ npm start

> nodejs-express-mysql@1.0.0 start
> node server.js

Server is running on port 8080.


I ara ja funciona la API. (l'alumne pot utilitzar Postman)

1. Create a new Tutorial using POST /tutorials Api

$ curl -i -H "Accept: application/json" -X POST -H "Content-Type: application/json" -d '{ "title":"Titol1","description":"Descripció 1" }' localhost:8080/api/tutorials

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8081
Vary: Origin
Content-Type: application/json; charset=utf-8
Content-Length: 151
ETag: W/"97-RkimZsWUw8GCdReyYgVuLFXsxC8"
Date: Sat, 01 May 2021 21:43:51 GMT
Connection: keep-alive

{"id":1,"title":"Titol1","description":"Descripció 1","published":false,"updatedAt":"2021-05-01T19:07:19.204Z","createdAt":"2021-05-01T19:07:19.204Z"}
i efectivament, ho comprovem directament en el mysql:
mysql> select * from tutorials;
+----+--------+---------------+-----------+---------------------+---------------------+
| id | title  | description   | published | createdAt           | updatedAt           |
+----+--------+---------------+-----------+---------------------+---------------------+
|  1 | Titol1 | Descripció 1  |         0 | 2021-05-01 19:07:19 | 2021-05-01 19:07:19 |
+----+--------+---------------+-----------+---------------------+---------------------+

Està funcionant la API.

2. Retrieve all Tutorials using GET /tutorials Api

$ curl -i -X GET localhost:8080/api/tutorials

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8081
Vary: Origin
Content-Type: application/json; charset=utf-8
Content-Length: 761
ETag: W/"2f9-3kntDat4Q6ay4VVBoijKdyLkqls"
Date: Sat, 01 May 2021 19:15:34 GMT
Connection: keep-alive

[{"id":1,"title":"Titol1","description":"Descripció 1","published":false,"createdAt":"2021-05-01T19:07:19.000Z","updatedAt":"2021-05-01T19:07:19.000Z"},{"id":2,"title":"Titol2","description":"Descripció 2","published":false,"createdAt":"2021-05-01T19:09:26.000Z","updatedAt":"2021-05-01T19:09:26.000Z"},{"id":3,"title":"Titol3","description":"Descripció 3","published":false,"createdAt":"2021-05-01T19:09:35.000Z","updatedAt":"2021-05-01T19:09:35.000Z"},{"id":4,"title":"Titol4","description":"Descripció 4","published":false,"createdAt":"2021-05-01T19:09:42.000Z","updatedAt":"2021-05-01T19:09:42.000Z"},{"id":5,"title":"Titol5","description":"Descripció 5","published":false,"createdAt":"2021-05-01T19:09:50.000Z","updatedAt":"2021-05-01T19:09:50.000Z"}]

3. Retrieve a single Tutorial by id using GET /tutorials/:id Api

$ curl -i localhost:8080/api/tutorials/2
...
{"id":2,"title":"Titol2","description":"Descripció 2","published":false,"createdAt":"2021-05-01T19:09:26.000Z","updatedAt":"2021-05-01T19:09:26.000Z"}

4. Update a Tutorial using PUT /tutorials/:id Api

$ curl -i -H "Accept: application/json" -X PUT -H "Content-Type: application/json" -d '{ "published":"true"}' localhost:8080/api/tutorials/3
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8081
Vary: Origin
Content-Type: application/json; charset=utf-8
Content-Length: 48
ETag: W/"30-eLrskyV5K+qpOebje/ICJS9bwCQ"
Date: Sat, 01 May 2021 21:41:52 GMT
Connection: keep-alive

{"message":"Tutorial was updated successfully."}

5. Find all Tutorials which title contains ‘node’: GET /tutorials?title=node

$ curl -i -X GET localhost:8080/api/tutorials/title=4
(no funciona?)

6. Find all published Tutorials using GET /tutorials/published Api

$ curl -i -X GET localhost:8080/api/tutorials/published
...
[{"id":3,"title":"Titol3","description":"Descripció 3","published":true,"createdAt":"2021-05-01T19:09:35.000Z","updatedAt":"2021-05-01T21:41:52.000Z"}]

7. Delete a Tutorial using DELETE /tutorials/:id Api

$ curl -i -X DELETE localhost:8080/api/tutorials/5
...
{"message":"Tutorial was deleted successfully!"}

8. Delete all Tutorials using DELETE /tutorials Api

$ curl -i -X DELETE localhost:8080/api/tutorials
...
{"message":"5 Tutorials were deleted successfully!"}

Instal·lació del fron-end

Un cop tenim instal·lat i funcionant el back-end (la API), el deixem engegat en la seva consola, i obrim una altra consola on instal·larem el front-end de React.

React + Node Express + MySQL (utilitzant Components). Github:

$ git clone https://github.com/bezkoder/react-crud-web-api

$ cd react-crud-web-api/
$ nom install

I arrenquem:

$ npm start

Compiled successfully!

You can now view react-crud in the browser.

  Local:            http://localhost:8081
  On Your Network:  http://192.168.43.83:8081

Note that the development build is not optimized.
To create a production build, use yarn build.

I ja tenim l'aplicació funcionant.

Desplegament

Com es comenta, per fer el development build del front-end podem fer: yarn build, però també ho podem fer amb:

$ npm run build
...
Creating an optimized production build...
...
Compiled successfully.

File sizes after gzip:

  52.62 KB  build/static/js/2.35457f30.chunk.js
  22.44 KB  build/static/css/2.47e06e2e.chunk.css
  2.39 KB   build/static/js/main.35b1a7a5.chunk.js
  774 B     build/static/js/runtime-main.efee8004.js
  144 B     build/static/css/main.b5fec8d3.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Aquesta última frase és important. Modifiquem el package.json i afegim la directiva homepage:

{
  "name": "react-crud",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  ...

Desplegar en local

  • Recordar que hem de tenir el servidor arrencat.

En local hem de configurar la ruta Apache per tal de què apunti al fitxer build/index.html:

  Alias /tutorials "/home/joan/M06_WEC_2122/UF2/react-crud-web-api/build/"
  <Directory "/home/joan/M06_WEC_2122/UF2/react-crud-web-api/build/">
      Options Indexes MultiViews FollowSymLinks
      AllowOverride None
      Require all granted
      DirectoryIndex index.html default.html index.php
  </Directory>


sudo /etc/init.d/apache2 restart

És veu tot el front-end, però no es mostra la llista de tutorials. Motiu i solució:

En el server.js del back-end, canviar el CORS origin:

var corsOptions = {
  origin: "http://localhost:8081"
};

per

var corsOptions = {
  origin: "http://localhost"
};


Desplegar en el VPS del Jaume Balmes

De la part del servidor no te n'has de preocupar. Només hi haurà un servidor i una base de dades. D'això se n'encarrega el professor.

Només t'has de preocupar de desplegar el front-end.


creat per Joan Quintana Compte, abril 2022