Merge pull request #18 from modern-agile-team/develop

Update localhost to each deployed host address, and then Change the host address string to ENVIRONMENT_VARIABLE.

Author: woorim960

README.md

@@ -1,4 +1,5 @@
 # create-dev-portfolio
+
 ![docker-badge](https://img.shields.io/badge/Docker-red)
 ![docker-compose-badge](https://img.shields.io/badge/Docker_Compose-red)
 ![type-script-badge](https://img.shields.io/badge/TypeScript-blue)
@@ -10,39 +11,39 @@ If you want to check the dev-portfolio library, please refer to the following li
 
 ![ezgif com-gif-maker](https://user-images.githubusercontent.com/56839474/194718430-5404fa1f-c24b-48a0-8730-15db2d3bde00.gif)
 
-
 ## List
-* <a href="recommended-systems">Recommended systems</a>
-* <a href="run">Run</a>
-* <a href="exit">Exit</a>
-* <a href="tip">Tip</a>
-* <a href="swagger-api">Swagger API</a>
-* <a href="refers">Refers</a>
-  * <a href="license">License</a>
-  * <a href="contributor">Contributor</a>
-  * <a href="Infra-Structure">Infra Structure</a>
-  * <a href="Database-ERD">Database ERD</a>
-  * <a href="example">Example</a>
 
+- <a href="recommended-systems">Recommended systems</a>
+- <a href="run">Run</a>
+- <a href="exit">Exit</a>
+- <a href="deploy">Deploy</a>
+- <a href="tip">Tip</a>
+- <a href="refers">Refers</a>
+  - <a href="swagger-api">Swagger API</a>
+  - <a href="Infra-Structure">Infra Structure</a>
+  - <a href="Database-ERD">Database ERD</a>
+  - <a href="example">Example</a>
+- <a href="license">License</a>
+- <a href="contributor">Contributor</a>
 
 ## Recommended systems
 
 **Operating System**: Linux & MacOS
-> Windows is also available, but bash terminal is recommended, and the following tools must be operated based on bash.  
+
+> Windows is also available, but bash terminal is recommended, and the following tools must be operated based on bash.
 
 **Tools**
+
 1. recommended: **Bash terminal**
 2. required: **Docker** & **Docker-compose**
-3.  **node** ≥ `v14.20.1`
-    * Using nvm, you can easily change the node version. Please refer to the following: [NVM](https://www.notion.so/NVM-53c04d5c8837480e8601e6bd39abc62a#6db02c02a5c549cbaaa7884cac709a9e)
+   - Install [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/).
+     > If **mac** and **windows** have **docker desktop** installed, **docker compose** is also installed, so there is no need to install it separately.
+     1. Click [here](https://docs.docker.com/get-docker/) to install Docker.
+     2. Click [here](https://docs.docker.com/compose/install/) to install Docker Compose.
+3. **node** ≥ `v14.20.1`
+   - Using nvm, you can easily change the node version. Please refer to the following: [NVM](https://www.notion.so/NVM-53c04d5c8837480e8601e6bd39abc62a#6db02c02a5c549cbaaa7884cac709a9e)
 4. **npm** ≥ `v6.14.17`
 
-- Install [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/).
-  > If **mac** and **windows** have **docker desktop** installed, **docker compose** is also installed, so there is no need to install it separately.
-  1.  Click [here](https://docs.docker.com/get-docker/) to install Docker.
-  2.  Click [here](https://docs.docker.com/compose/install/) to install Docker Compose.
-
-
 ## Run
 
 1. Install this repo.
@@ -52,7 +53,7 @@ If you want to check the dev-portfolio library, please refer to the following li
 $ npx create-dev-portfolio <YOUR_APP_NAME>
 ```
 
-2. Run ```dev-portfolio``` by daemon.
+2. Run `dev-portfolio` by daemon.
 
 ```bash
 # If you want to run both the client and the server, enter the command below.
@@ -80,51 +81,43 @@ $ npm run exit:server
 
 ## Deploy
 
+Please note that **only [client-app](https://github.com/modern-agile-team/create-dev-portfolio/tree/master/client/app) are deployed** except for [server-app](https://github.com/modern-agile-team/create-dev-portfolio/tree/master/server) on [Vercel](https://vercel.com/). If you want to deploy the server code, you have to deploy it directly using the cloud provided by AWS, GCP, Oracle, etc.  
+The deploying guide will be released soon, so please look forward to it.
+
 ```bash
-# After complete client code, then enter the command below.
-# If you enter this, client will be deployed with vercel automatically.  
+# If you enter the command below, the deploy will proceed automatically to the web page where new URL is registered on Vercel.
 $ npm run deploy:client
 ```
 
-[vercel](https://vercel.com/)
+## Tip
 
+1.  **If you want to customize your client.  
+    Check to README.md in [dev-portfolio](https://github.com/modern-agile-team/dev-portfolio).**  
+    please go to the link below!
 
-## Tip
-1. **If you want to customize your client.  
-Check to README.md in [dev-portfolio](https://github.com/modern-agile-team/dev-portfolio).**    
-please go to the link below!   
+        https://github.com/modern-agile-team/dev-portfolio/blob/master/README.md
 
-    https://github.com/modern-agile-team/dev-portfolio/blob/master/README.md
+2.  **If you want to change environment variables such as PORT, DB.  
+    Customize files called `.*.env`.**  
+    By default, it works normally without modification.
 
-2. **If you want to change environment variables such as PORT, DB.  
-Customize files called ```.*.env```.**  
-By default, it works normally without modification.  
-    ```bash
-    # Move to dev-portfolio folder.
+    ````bash # Move to dev-portfolio folder.
     $ cd dev-portfolio
 
-    # Customize the .*.env file as you.
-    $ vi ./config/.client.env
-    $ vi ./config/.server.env
-    ```
-
+       # Customize the .*.env file as you.
+       $ vi ./config/.client.env
+       $ vi ./config/.server.env
+       ```
+    ````
 
 ## Refers
 
-### License
-[MIT](https://github.com/modern-agile-team/create-dev-portfolio/blob/master/LICENSE)
-
-### Contributor
-- [seohyunsim](https://github.com/seohyunsim)
-- [soonki-98](https://github.com/soonki-98)
-- [jisu3817](https://github.com/jisu3817)
-- [woorim960](https://github.com/woorim960)
-
 ### Swagger API
-<img width="1450" alt="스크린샷 2022-09-12 오후 9 14 15" src="https://user-images.githubusercontent.com/56839474/189650561-5ba9c467-b52c-48e6-b3e7-30813954e12d.png">  
+
+<img width="1450" alt="스크린샷 2022-09-12 오후 9 14 15" src="https://user-images.githubusercontent.com/56839474/189650561-5ba9c467-b52c-48e6-b3e7-30813954e12d.png">
 
 You can view server apis very easily by using the Swagger documentation.  
-To use the swagger, the ```dev-portfolio``` server must be in a working state.  
+To use the swagger, the `dev-portfolio` server must be in a working state.
 
 If the server is up, go to the link below.
 
@@ -133,6 +126,7 @@ http://localhost:<YOUR_SERVER_PORT>/swagger
 ```
 
 ### Infra Structure
+
 <img width="1028" alt="스크린샷 2022-09-15 오후 9 48 37" src="https://user-images.githubusercontent.com/79014269/193828681-5d198fd9-9006-4713-a69b-ce576c58b442.png">
 
 ### Database ERD
@@ -147,7 +141,7 @@ http://localhost:<YOUR_SERVER_PORT>/swagger
 
 <br>
 
-2. <[woorim960](https://github.com/woorim960/woorim-personal-website)> 
+2. <[woorim960](https://github.com/woorim960/woorim-personal-website)> http://152.70.89.184
 
 ![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/56839474/194719475-1cc2469e-7b7b-4ef0-8f87-236fa3aefbe1.gif)
 
@@ -156,3 +150,16 @@ http://localhost:<YOUR_SERVER_PORT>/swagger
 3. <[seohyunsim](https://github.com/seohyunsim/seohyunsim-portfolio)> https://seohyunsim-portfolio.vercel.app/
 
 <img width="1000" alt="스크린샷 2022-09-12 오후 8 52 52" src="https://user-images.githubusercontent.com/56839474/189646646-7faf4842-e881-42bc-bcb9-422975adac95.png">
+
+<br>
+
+## License
+
+[MIT](https://github.com/modern-agile-team/create-dev-portfolio/blob/master/LICENSE)
+
+## Contributor
+
+- [seohyunsim](https://github.com/seohyunsim)
+- [soonki-98](https://github.com/soonki-98)
+- [jisu3817](https://github.com/jisu3817)
+- [woorim960](https://github.com/woorim960)

client/README.md

@@ -1,3 +1,5 @@
+const { REACT_APP_HOST_ADDRESS, REACT_APP_SERVER_PORT } = process.env;
+
 export class HTTP {
   private domain: string = "";
 
@@ -40,6 +42,8 @@ export class HTTP {
   }
 }
 
-const instance = new HTTP("http://localhost:8000");
+const instance = new HTTP(
+  `http://${REACT_APP_HOST_ADDRESS}:${REACT_APP_SERVER_PORT}`
+);
 
 export default instance;

client/app/src/apis/instance.ts

@@ -1 +1,8 @@
-PORT="5005"
+# Client port number to open this react-app.
+PORT=3000
+
+# Enter the same value as the PORT environment variable written in .server.env.
+REACT_APP_SERVER_PORT=8000 
+
+# Put the IP or host address of the computer you are using.
+REACT_APP_HOST_ADDRESS="localhost" 

config/.client.env

@@ -1,5 +1,6 @@
 # NodeJS
 PORT=8000
+HOST_ADDRESS="localhost" # Put the IP or host address of the computer you are using.
 
 # for accessing from Nodejs to MySQL
 DB_HOST="db"

config/.server.env

@@ -2,6 +2,8 @@
 # http://dev.mysql.com/doc/refman/5.7/en/server-configuration-defaults.html
 
 [mysqld]
+max_connections=1000
+
 #
 # Remove leading # and set to the amount of RAM for the most im`port`ant data
 # cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.

server/.db/etc/my.cnf

@@ -9,12 +9,13 @@ dotenv.config({ path: '../../config/.server.env' });
 
 const app = express();
 const PORT = process.env.PORT || 8000;
+const HOST_ADDRESS = process.env.HOST_ADDRESS || 'localhost'
 
 const swaggerSpec = YAML.load(path.join(__dirname, './swagger.yaml'));
 const portInjectedSwaggerSpec = JSON.stringify(swaggerSpec).replace(
   '{PORT}',
   PORT.toString()
-);
+).replace('{HOST_ADDRESS}', HOST_ADDRESS);
 
 import visitor from './src/apis/visitor';
 

server/README.md

@@ -7,7 +7,7 @@ const config = {
   password: process.env.DB_PSWORD,
   database: process.env.DB_DATABASE,
   port: Number(process.env.DB_PORT),
-  connectionLimit: 10,
+  connectionLimit: 1000,
 };
 
 const mysqlPool = mysql.createPool(config);

server/app/main.ts

@@ -4,7 +4,7 @@ info:
   title: 'dev-portfolio API'
   description: 'dev-portfolio API'
 servers:
-  - url: http://localhost:{PORT}/
+  - url: http://{HOST_ADDRESS}:{PORT}/
 paths:
   /apis/visitor/count:
     patch: