# Deploy Heroku {% hint style="info" %} Documentația oficială: {% endhint %} {% hint style="info" %} Pentru a parcurge pașii următori, asigurați-vă că ați instalat [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) și că aveți un cont Heroku {% endhint %} ## 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" } } ``` {% hint style="warning" %} 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 {% endhint %} * 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 ![](/files/1ocZ5Yn2r8gK6XkbqMbu) * Ș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 ![](/files/O9DH9Ao7aRGzhzOJtz7L) ![](/files/0TwwvkSMhB7rkDv26977) ## 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) ![](/files/NbyqKdml4WnDmenyLHRa) * 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ă - pentru exemplul meu. * Adăugăm valorile din .env in platforma heroku (ca în exemplul de mai sus) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gurita-alexandru.gitbook.io/cloud-computing-2023-simpre/cloudcomputing2022/deploy-heroku.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.