Deploy Heroku

Documentația oficială: https://devcenter.heroku.com/articles/deploying-nodejs

Pentru a parcurge pașii următori, asigurați-vă că ați instalat Heroku CLI și că aveți un cont Heroku

1. Deploy Back-end

Utilizând Heroku, vom publica aplicația Back-end creată direct din terminal

• Deschideți proiectul asociat Back-end-ului

• Vom modifica fișierul package.json - vom preciza versiunea de Node pe care mașina virtuală creată de Heroku să o folosească. Am evidențiat liniile noi în code block-ul de mai jos (stergeți comentariile ulterior copierii)

// package.json
{
  "name": "cc-cms",
  "version": "1.0.0",
  "description": "Cloud Computing SIMPRE - 2022",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/guritaalexandru/cc-cms.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/guritaalexandru/cc-cms/issues"
  },
  "homepage": "https://github.com/guritaalexandru/cc-cms#readme",
  "dependencies": {
    "@google-cloud/translate": "^6.3.1",
    "@sendgrid/mail": "^7.6.2",
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "multer": "^1.4.4",
    "mysql": "^2.18.1",
    "nodemon": "^2.0.15"
  },
  // look here!
  "engines": {
    "node": "14.x"
  }
}

Pentru că utilizăm Heroku, nu vom putea adăuga cheia serviciului de traducere / image recognition în proiectul care va fi publicat decât prin git. NU ESTE UN GOOD PRACTICE! Cheile nu trebuiesc urmărite cu git-ul! For the sake of example și pentru că proiectele noastre sunt destinate învățării, vom face o excepție și vom sterge din .gitignore directiva care cere ignorarea fișierului translateKey.json pentru a o putea trimite către producție

• Deschideți un terminal în folderul asociat proiectului Back-end (eu folosesc git bash)

• Rulați heroku login (vă va trimite într-un proces de logare pe heroku)

• Ctrl-C ca să ieșiți din proces dupa ce v-ați logat cu succes

• Rulați heroku create (creates a new empty application on Heroku, along with an associated empty Git repository) și copiați numele aplicației create (în exemplul meu, secure-chamber-52670)

• Rulați heroku git:remote -a app-name (git:remote -a secure-chamber-52670 în exemplul meu) (Git remotes are versions of your repository that live on other servers. You deploy your app by pushing its code to a special Heroku-hosted remote that's associated with your app)

• Rulați git push heroku NUME_BRANCH:main (în exemplul meu, git push heroku 03_Heroku_Deploy:main). Această operațiune va porni și procesul de build al aplicației

• Știm că fișierul .env nu este urmărit de git, așa că vom adăuga valorile de configurare din intermediul platformei puse la dispoziție de Heroku

• Din dashboard-ul heroku apăsați pe proiectul dorit -> Settings -> Config Vars -> copiați denumirile și valorile dorite

2. Deploy Front-end

Utilizând Heroku, vom publica aplicația Front-end creată direct din terminal

• Deschideți proiectul asociat Front-end-ului

• Vom modifica fișierul package.json - vom preciza versiunile de Node și de npm pe care mașina virtuală creată de Heroku să le folosească. Am evidențiat liniile noi în code block-ul de mai jos (stergeți comentariile ulterior copierii)

// package.json
{
  "name": "cc-ui",
  "version": "0.1.0",
  "private": true,
  //look here!!
  "engines": {
    "npm": "6.14.16",
    "node": "14.19.1"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "heroicons": "^1.0.6",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }
}

• Deschideți un terminal în folderul asociat proiectului Front-end (eu folosesc git bash)

• Rulați heroku login (vă va trimite într-un proces de logare pe heroku)

• Ctrl-C ca să ieșiți din proces dupa ce v-ați logat cu succes

• Rulați heroku create (creates a new empty application on Heroku, along with an associated empty Git repository) și copiați numele aplicației create (în exemplul meu, cryptic-woodland-22744)

• Rulați heroku git:remote -a app-name (git:remote -a cryptic-woodland-22744 în exemplul meu) (Git remotes are versions of your repository that live on other servers. You deploy your app by pushing its code to a special Heroku-hosted remote that's associated with your app)

• Rulați git push heroku NUME_BRANCH:main (în exemplul meu, git push heroku 03_Heroku_Deploy:main). Această operațiune va porni și procesul de build al aplicației

• După build, veți găsi link-ul către aplicația Front-end publicată - https://cryptic-woodland-22744.herokuapp.com/ pentru exemplul meu.

• Adăugăm valorile din .env in platforma heroku (ca în exemplul de mai sus)