내일 또는 금욜은 : 도메인
가비아 후이즈
Front server
프론트 서버 접속 및 아래 명령어 실행
내가 실행할 폴더 : 실제 웹브라우저에 띄울 폴더 : root /home/ubuntu/www 야 www라는 폴더야
index : 어떤 파일을 읽어야해 ? index.html이랑 index.htm이야 (htm은 예전에 많이씀)
root & index 앞에 쓴건 고정 ** 변수처럼 이름을 바꿀 수 없
아직 www폴더를 만들지 않음 (어제 웹에 뜬 내용은 파일이 없을경우 나오는 웰컴페이지)
이제 우리가 만든 파일을 server에서 볼 수 있게끔 만들기
root 폴더에 있는 home/ubuntu/www 폴더 만들기 -> www안에 들어가서 index.html 만들기
cp
mv
ln
mkdir 폴더 생성 명령
mkdir [폴더명]
cd ~
mkdir www //폴더 생성
ls // 확인
cd www
vi index.html // 파일 생성
i // hello nginx 작성
esc
shift + : wq!
nginx 꺼서 다시 키기
sudo systemctl stop nginx //껐다가
sudo systemctl start nginx // 다시 키시
sudo systemctl restart nginx (또는 그냥 restart 하거나)
nginx 잘 돌아가나 확인
ps -ef | grep nginx
Public IP도 브라우저에서 쳌
잘 나온다. (index.html 만든거 안에 text를 출력함)
만약 ERROR 나오면
1. 바로가기를 잘 설정했는가 ?
cd /etc/nginx/sites-enabled
ls -al
myapp.conf // <- 요 색깔이 파랑색이어야 됨 !
2. 그래도 500 ERROR가 뜬다 ?
cd ..
cd sites-available
ls -al //myapp.conf 잘 있는지 확인
sudo vi myapp.conf // 내용 확인
nginx 상태 확인 명령어
sudo systemctl status nginx
myapp.conf 파일 내용에 오타를 친절히 알려준다.
=>위 내용 어제 쓴 [front server] 글에 추가하기
리액트 가져오긔ㅣㅣ,,,
back
front
[ 댓글 예전에 만든 것 복사해오기 or 교수님 github ]
https://github.com/ingoo-code/webpack5.git
1. 터미널 파워쉘 ---> local-server 로 옮기기
2. 파일 옮기자 (처음에 파일 구조를 잘못해서 어쩔수없이!)
<- 복사 - > front 폴더 안에 붙여넣기
3. index.jsx 코드 수정
일단 App 안쓰니 // 주석처리
import React from 'react'
import ReactDOM from 'react-dom'
//import App from './App'
import './css/index.css'
const App = ()=>{
return(
<>
안녕,,리액ㅌ..
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
이제 웹팩 돌려보면서 확인해보기
4. 터미널 front 폴더로 입장 ** + npm 설치
npm install
-> ERROR! 이상하게 웹팩 실행할 때 마다 pmmm관련 에러가남 ! 아래 코드 실행
npm install -D @pmmmwh/react-refresh-webpack-plugin --save --legacy-peer-deps
https://blckchainetc.tistory.com/252
[Webpack error] unable to resolve dependency tree
webpack 설치 / 환경 설정 중 아래 코드가 계속 에러가 났다. 아래의 pmmmwh ~ 을 실행시켜야하는데 오류가 뜸.. $ npm install -D @pmmmwh/react-refresh-webpack-plugin 오류 메세지 : unable to resolve d..
blckchainetc.tistory.com
5. 웹팩 실행
npm run dev
6. webpack.config.js 환경설정
실행한 환경설정
const path = require('path')
const RefreshwebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
const mode = 'production'
const devtool = 'hidden-source-map'
const isDevelopment = mode === 'production';
const refresh = isDevelopment ? [] : ['react-refresh/babel']
module.exports = {
name:'ingoo',
mode:mode,
devtool:devtool,
resolve:{
extensions:['.js', '.jsx']
},
entry:{
app:['./index.jsx']
},
module:{
rules:[
{
test:/\.jsx?$/,
loader:'babel-loader',
options:{
presets:[
['@babel/preset-env',{
targets:{browsers:['last 2 chrome versions']}
}],
'@babel/preset-react'
],
plugins:refresh
},
},
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
}
],
},
plugins:[
new RefreshwebpackPlugin(),
new webpack.LoaderOptionsPlugin({debug:true}),
new MiniCssExtractPlugin({ filename: 'app.css' })
],
output:{
path:path.join(__dirname,'dist'),
filename:'app.js',
publicPath:'/dist',
},
devServer:{
publicPath:'/dist',
hot:true,
proxy: {
'/api': 'http://localhost:3000',
},
host: '0.0.0.0',
}
}
교수님 github말고 내 파일을 복붙했더니 뭔가 달라서 에러남 -> 교수님 package.json, webpack.config.js 복붙 하니 되었다 !
npm run build
=> build 라는 것을 햇다,, => dist 파일 생김
* build 우리가 썼던 코드를 변환했다 ~ ( C, JAVA = 컴파일 과 비슷)
7. index.jsx 수정 -> 이제 App 을 가져올 수 있다!
* webpack으로 index.jsx 파일 안에 import되어있는 모든걸 번들해서 dist/App.js로 만듬
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './css/index.css'
ReactDOM.render(
<App/>,
document.querySelector('#root')
)npm run dev
웹팩은 내가 import 해오는 모~든 것을 가져옴! 그래서 import 한 내용 중 에러가 있으면 -> 오류 !
< dist 폴더 설명 >
devServer의 역할 : 파일이 저장되거나 그러면 build를 자동으로 해주고 실행시켜줌 / dist 파일은 배포할 때만 필요하다. 배포할 때는 dist와 index.html 파일만 필요하다.
실제로 올릴 때는 devServer가 아닌 nginx 로, 그리고 파일을 계속 수정하는게 아닌 한번 올리는거가 달라짐. (오류 수정 - > build 할 수도 있)
dist 는 원래 생성되어 계속 돌아가고 있었음 (가상으로)
이제 터미널 local 과 aws back 두개를 쓸 것
comment > api > api.jsx
적힌 url http://localhost:3000/api -> 안된다 -> 우리가 쓸 수 있는 url (aws backend public IP) 로 바꿔주기
//비동기 함수들 모음
export const getComment = async (dispatch) =>{
dispatch({type:'GET_COMMENT'})
try{
const response = await fetch('http:/IP주소/api/comment')
const data = await response.json()
dispatch({type:'GET_COMMENT_SUCCESS', payload:data})
}catch(e){
dispatch({type:'GET_COMMENT_ERROR', payload:e})
}
}?????????????? => 에러가 난다고 한다.
현재까지 한 것 정리
front - server
한 것 : node.js, nginx , 리액트, aws 리눅스 인스턴스 front 연결
리액트 :
webpack dev server
localhost:8080 을 쳤을 때 댓글 창이 뜨도록 만듬
각자 pc에 있는 코드를 실행시켜서
ec2 aws server : (restful API)
- back - server
설치한 것 : 리눅스 aws 인스턴스 back 연결 + node.js , mysql + express
express에 넣은 것 : bodyparser, sequelize, +
local front
cors ERROR
local& ec2의 ip는 서로 달라서 생기는 오류일경우
ec2 back server
cors 설치해서 미들웨어에 실으면 오류 해결 됨( 예전에 해본적 있다고,,)
aws-back 터미널 + 인스턴스 접속하기
아래처럼 경로 들어가서
npm install cors
vi server.js // -> 아래 두 코드 추가 입력
sudo npx pm2 list // 현재 돌아가고 있는게 있는지 확인
sudo npx pm2 start server.js // 시작
잘 작동 되는지 확인
db에 아무것도 없으면 안나오니까 아래 명령어로 db확인
mysql -uroot -proot
use react_comment;
select * from Comments;
aws back 인스턴스 public IP 주소에서 아래와 같이 나옴
localhost:8080 은 아직 로딩중이라고 나옴
아하 아까 쓴 url이 잘못되었었다!
교수님의 awsTest가 아닌 내가 만든 back 폴더로 연결되어 있었다.
아래 api/comment 빼고 실행
//비동기 함수들 모음
export const getComment = async (dispatch) =>{
dispatch({type:'GET_COMMENT'})
try{
const response = await fetch('http://[back IP주소]')
const data = await response.json()
dispatch({type:'GET_COMMENT_SUCCESS', payload:data})
}catch(e){
dispatch({type:'GET_COMMENT_ERROR', payload:e})
}
}
date: null 인것을 수기로 바꿔주기 (연습용! 원래는back에서 그대로 가져와야함)
createdAt 스트링 10글자를 잘라서 쓰기
result 만든 것을 payload에 던져주기
//비동기 함수들 모음
export const getComment = async (dispatch) =>{
dispatch({type:'GET_COMMENT'})
try{
const response = await fetch('http://52.15.167.154')
const data = await response.json()
const result = data.map(obj =>{
return{...obj, date:obj.updatedAt.substr(0,10)}
})
dispatch({type:'GET_COMMENT_SUCCESS', payload:result})
}catch(e){
dispatch({type:'GET_COMMENT_ERROR', payload:e})
}
}
