flutter sdk 설치

android studio 설치

flutter doctor 실행 시, 

Unable to locate Android SDK 란 메세지가 나오면서 android sdk의 위치를 못찾는 경우

flutter config --android-sdk D:\android-sdk-windows 처럼 android-sdk경로 지정

 flutter doctor --android-licenses 실행

Posted by roselumi
,

reactjs nextjs nginx setting

IT 2023. 6. 14. 10:10

좌충우돌 했던 설정.. 한방에 정리한다.
나같은 경우는 localhost에 8089 3000 8081 3개의 포트가 있는데 각각 아래와 같음
8089: nginx static server
3000: nextjs front server
8081: back end server
결론적으로, nextjs를 사용하면서 서버 하나 더 추가
nextjs의 SSR관련 로직을 빌드할 때 SSG로 바꿔주는 설정이 있다고 한다. 친구한테 들음. 이런게 있다니 신기함.

1. nginx setting
nginx.conf
location: D:\nginx\conf\nginx.conf
contents: nginx.conf 파일 참고

nginx.conf
0.00MB

2. react setting
2-1. 무중단 배포를 위한 pm2 설치
2-2. yarn or npm(나같은 경우는 yarn을 사용) yarn add pm2
2-3. 설치 되면 프로젝트 루트 폴더에 server.js and ecosystem.config.js 파일 추가(파일은 첨부함)

ecosystem.config
0.00MB
server.js
0.00MB

pm2 start ecosystem.config.js 프롬프트창에 실행시켜 잘되는지 확인한다.  ecosystem.config.js에 포트 관련 설정 있을거임 PORT: 3000 이런식으로...

아래는 내 깃 소스코드 주소
https://github.com/leesangdoc/ucb_front.git
 

Posted by roselumi
,

yarn next start

yarn next build

yarn next dev

pm2 start ecosystem.config.js

pm2 delete all

pm2 delete (name)

 

npm run build

npm run start

npm run dev

Posted by roselumi
,


# user nobody;
worker_processes 1;
error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events { worker_connections  1024; }
http {
    include        mime.types;
    default_type   application/octet-stream;
sendfile         on;
    keepalive_timeout 65;
upstream my_app {
server 127.0.0.1:3000;         # 현재 실행 중인 버전
}

# log_format  main '$remote_addr - $remote_user [$time_local] "$request" '
    #                   '$status $body_bytes_sent "$http_referer" '
    #                   '"$http_user_agent" "$http_x_forwarded_for"';
    # error_log   logs/error.log  main;
    # tcp_nopush      on;
    # gzip   on;

    server {
listen 8089;
listen [::]:8089;
server_name 127.0.0.1;

location / {
root D:/sourceCode/recent_ucb_front/.next/static/;
index index.html;
try_files $uri $uri/ /index.html index.htm;


# 이미지 프록시
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ {
proxy_pass http://localhost:8089;
}

# js파일 프록시
# location ~* \.(?:js)$ {
#  proxy_pass http://localhost:3000;
# }

# cors 해제
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8089';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}

if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8089';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8089';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

# proxy_pass http://localhost:3000;
proxy_pass http://my_app;
proxy_http_version  1.1;
proxy_set_header Upgrade  $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header  Host $host;
proxy_cache_bypass  $http_upgrade;
proxy_set_header X-Real-IP  $remote_addr;
proxy_redirect  off;
}

# api route 프록시
#location /api {
# proxy_pass http://localhost:8081/api/;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection 'upgrade';
# proxy_set_header Host $host;
# proxy_cache_bypass $http_upgrade;
#}
}

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

Posted by roselumi
,

한마디로  페이지 폴더 내에 리액트 컴포넌트 아닌거 익스포트 하면 안된다는 나같은 경우는 리액트 훅스에서

useRecoilValue -> useRecoilValueLoadable로 변환해서 처리함

근데, 배포시 서버사이드쪽 관련 nginx로 할때 이슈생김... 이거 내일 해결해야함. 오늘 주말이니까 회사 안가는건 당연함.

Posted by roselumi
,

npm i --save-dev @types/d3

Posted by roselumi
,

D:\sourceCode\the_new_ucb_front>npm install react-wordcloud
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: the_new_ucb_front@0.1.0
npm ERR! Found: styled-components@6.0.0-rc.1
npm ERR! node_modules/styled-components
npm ERR!   styled-components@"^6.0.0-rc.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer styled-components@">=4.0.0 || >=5.0.0" from styled-reset@4.4.7
npm ERR! node_modules/styled-reset
npm ERR!   styled-reset@"^4.4.7" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! C:\Users\lumib\AppData\Local\npm-cache\_logs\2023-05-23T06_19_09_095Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\lumib\AppData\Local\npm-cache\_logs\2023-05-23T06_19_09_095Z-debug-0.log

 

npm install react-wordcloud --save --legacy-peer-deps 로 해결

Posted by roselumi
,

노드 버전 내려라 이딴 말하는 사람들도 있지만 

그냥 올드버전도 SSL 인증 되게 해라. 윈도우 에선 이거 때려 넣으면 됨

set NODE_OPTIONS=--openssl-legacy-provider

뭐 이젠 쳇지피티로 찾으려나???

 

출처: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

'IT' 카테고리의 다른 글

react typescript 타입관련 에러뜰때  (0) 2023.05.23
react-wordcloud 설치문제 해결  (0) 2023.05.23
폐쇄망 에피소드...  (0) 2023.04.20
Error: Unable to find git in your PATH.  (0) 2023.02.08
flutter unable to find bundled java version.  (0) 2023.02.07
Posted by roselumi
,

폐쇄망 에피소드...

IT 2023. 4. 20. 15:33

역시나.. 폐쇄망에서 소프트웨어 버전에 맞게 설치하는건 너무 피곤한 작업니다.
2017 비주얼 스튜디오 빌드툴을 다시 찾아서 설치중.. ㅠㅠ 어제 지웠던게 후회되는 순간...
전역(글로벌)으로 설치된 npm 때문에 설정이 꼬일수도 있다.
npm uninstall -g npm -> 이걸로 날린다.
npm cache clean --force -> 이걸로 npm 캐시(컴퓨터에서 빠른 로딩을 위해 기억하고 있는 데이터) 날린다.
현재 프론트엔드의 nodejs and npm version은 다음과 같다...
npm 6.14.15
node 12.22.9
해당 버전에 맞춰서 강제 설치 해야 하는 상황....
아.....
찾아보자!
출처: https://copyprogramming.com/howto/create-react-app-requires-node-14-or-higher-solutions-for-updating-node-or-using-an-older-version
npx create-react-app@3.4.1 test4 --template typescript
근데  package.json에 붙는 캐럿(^) => "react": "^17.0.2",
하위버전의 소프트웨어는 보장한다는 뜻
이렇게 하니까 기존 플젝 운영권에서 사용하던 모듈을 그대로 설치할 수 있었다.
레거시 환경 -_-;; 힘들다 흑 ㅠ
리눅스를 굉장히 오랜만에 사용해본다. 보통 개발만 주로해서 서버에 직접 붙어서 배포나 환경설정 했던 경험이 많지 않았다.
sudo가 뭐였더라... sudo (superuser do) 명령어. 현재 계정에서 root 권한을 이용하여 명령어를 실행할 때 사용. 이라네용
yarn을 리눅스에 사용하려 할 때, 
export PATH="$PATH:/opt/yarn-[version]/bin"
export PATH="$PATH:`yarn global bin`" 
출처: https://stackoverflow.com/questions/54256173/yarn-binary-offline-installation-on-centos-7

오늘은 수요일 .yarnrc 파일을 개발서버에서 올려서 확인해보려 했는데 서버 접속 권한 직원들이 전부 일이 있어서 없는 바람에 못함 ㅠㅠㅠ
yarn install -offline
결국 yarn offline이 안되서 node_modules  폴더를 통째로 옮겨서 해결함. ㅠㅠ
[ React ]"npm run build" = "react-scripts: Permission denied"
관련 출처: https://carmack-kim.tistory.com/117

리눅스에서 압축파일 풀기 및 압축하기
https://bluecolorsky.tistory.com/23

리눅스 파일명 변경
https://webdir.tistory.com/145

Posted by roselumi
,

이것저것 다 해봤는데 vs code에서 안됬던 케이스 

시키는 환경변수도 다 추가했는데도 안됨

https://stackoverflow.com/questions/51263438/how-to-solve-unable-to-find-git-in-your-path-on-flutter

 

How to solve "Unable to find git in your PATH" on Flutter?

I've just tried to install Flutter on Linux and when I try to run a flutter command (flutter doctor), I'm getting Error: Unable to find git in your PATH. How can I solve this?

stackoverflow.com

 

그럴때는. 아래 그림은 vscode 우클릭 

그다음 속성 그냥 클릭하면

그리고 다시 하면 된다

Posted by roselumi
,