Linux의 Springboot+Vue+Nginx 배포 온라인 서버

처음으로 프로젝트를 배치하고 인터넷의 글을 봤는데 너무 엉터리였어요. 긴 고통 속에서 마침내 여기저기 긁어모아 완성했어요...

SpringBoot

SpringBoot은 크로스 도메인 제한을 닫을 수 있습니다. 전제 조건은 백엔드를 개발하거나 백엔드에 도움을 요청할 수 있다는 것입니다.

WebMvcConfigurer 인터페이스 구현

설정 클래스를 작성하여 mvc 설정 인터페이스를 실현하다

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")// 
                .allowedOrigins("*")// 
                .allowCredentials(true)//   
                .allowedMethods("GET", "POST", "PUT", "DELETE")// 
                .maxAge(3600);// 
    }
}

위의 방법을 통해springmvc는 전역을 허용할 수 있습니다

Spring Security

Spring Security를 권한으로 도입했다면 Security 설정 클래스에서 크로스 필드를 허용해야 합니다

    private CorsConfigurationSource CorsConfigurationSource() {
        CorsConfigurationSource source =   new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");	// ，* ， ip “localhost：8080”， “，” ；
        corsConfiguration.addAllowedHeader("*");//header， header， token， * token；
        corsConfiguration.addAllowedMethod("*");	// ，PSOT、GET 
        ((UrlBasedCorsConfigurationSource) source).registerCorsConfiguration("/**",corsConfiguration); // url
        return source;
    }
    
	...
	
	@Override
    protected void configure(HttpSecurity http) throws Exception {
        //cors
        http.cors().configurationSource(CorsConfigurationSource());
        ...
	}

이 두 개를 설정하면 백엔드 차원에서 크로스오버 문제를 해결할 수 있습니다.물론 Nginx로 크로스 도메인 접근을 실현하고 싶습니다

Nginx

설치 프로세스를 생략합니다.직접 구성 파일 시작

user  root;	# 403 ， nobody root， nginx 
worker_processes  auto;
events {
    worker_connections  1024;
}
http {
	...
    server {
		# nginx 80 
        listen       80;
        server_name  localhost;
		#  
        location / {
            root   html/dist;
            index  index.html index.htm;
        }
		#  springboot 
		location /api/ {
			#  : /api/login 
			# Nginx : http://127.0.0.1:9000/login
			proxy_pass http://127.0.0.1:9000/;
			#  springboot ip 
			proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_http_version 1.1;
	        proxy_set_header Connection "";
        }

주의!!!Vue의 baseURL은 proxy_에 영향을 미칩니다.pass

Vue

하면, 만약, 만약...

axios.defaults.baseURL = 'http://127.0.0.1:9000/api'

위의 에이전트를 거친 후 방문은

axios.defaults.baseURL = 'http://127.0.0.1:9000/http://127.0.0.1:9000/api'

그래서 baseURL을

axios.defaults.baseURL = '/api'

Linux 방화벽

1, 오픈 포트
firewall-cmd--zone=public--add-port=9000/tcp--permanent#오픈 9000 포트
firewall-cmd--zone=public--remove-port=9000/tcp--permanent#9000 포트 닫기
firewall-cmd --reload# 구성 즉시 적용
2. 방화벽의 모든 열린 포트 보기
firewall-cmd --zone=public --list-ports
3. 방화벽 닫기
만약 개방할 포트가 너무 많아서 번거롭다면 방화벽을 닫고 안전성을 스스로 평가할 수 있다
systemctl stop firewalld.service
4. 방화벽 상태 보기
firewall-cmd --state
5, 모니터링 포트 보기
netstat -lnpt

아리운

아리운 서버 보안 그룹 9000 포트 띄우기
마침내 성공하였다.