처음부터 개인 블로그 만들기

프런트엔드에nuxt 사용

배치 시간을 절약하기 위해 (주로 내 앞부분은 유치원 수준...),create-nuxt-app을 이용하여 개발하다.

yarn이 비교적 인기가 많은 것을 감안하여 yarn을 가방 관리로 채택하다.

yarn create nuxt-app

프런트엔드 디스플레이 프레임워크는element-ui를 사용합니다

SSR 서버 선택 koa

nuxt 비동기 데이터,axios 사용

이create-nuxt-app은nuxt에 설정하는 데 도움을 줄 것입니다.config.js에서 비동기 데이터 불러오기, 이것은 blogFe에서 blogApi를 직접 호출하는 것입니다. 사용자 브라우저에서 Ajax 요청이 아닙니다.

export default {
    //  ctx koa ctx, cookies , 
    // ctx.req.headers.cookie 
ctx.request.cookie
    async asyncData(ctx) {
        //console.log(ctx)
        //console.log(ctx.req.headers.cookie)
        const msg = await ctx.app.$axios.$get('/articles/1')
        return { msg: msg }

    }
}

사용자 브라우저에서 aax의 비동기 요청: 이것은 CORS의 문제가 있을 수 있습니다. 초보적으로 대외적으로 하나의 주소를 사용하고nginx를 통해 전단/백엔드 요청을 blogFe/blogApi에 나누어 주려고 합니다.

export default {
    methods: {
        onSubmit(){
            let resp=this.$axios.$post(
                "http://<ip>:<port>/<blabla...>", 
                data
            )
        }
    }
}

일부 구성 요소는 지역 사회가 추천하는 모듈을 직접 사용합니다

markdown

markdown 컴파일은nuxt 커뮤니티에서 추천하는 markdown-it로 nuxt를 수정합니다.config.js 파일,markdown-it 설정 추가

//nuxt.config.js
  modules: [
    '@nuxtjs/markdownit',
  ],

비교적 재미있는 것은 이렇게 쓸 수 있다는 것이다.markdown 파일은 직접import로 도입한다

"use strict";
import testMd from '../../md/test.md'
export default {
//   data() {
//     return {
//         testMd: testMd,
//     }
//   },
    computed: {
      testMd() {
        return testMd
      }
    }
}

markdown css 스타일(highlight.js도 좋아요)

css를 표시하려면 github 스타일의 github-markdown-css를 사용하십시오.config.js에 구성 추가:

  css: [
    'github-markdown-css/github-markdown.css',
  ],

백엔드는 golang/gin 프레임워크를 사용합니다

데이터베이스에서 mysql를 잠시 선택하면 후기에postgres를 바꿀 수 있습니다

mysql보다 postgres가 더 좋대요. 아직 안 친해요. 익으면 바꿔봐요.

nginx는 전송을 하고 CORS를 돌기 위해 nginx 설정을 사용하고 경로를 통해 각각nuxt와gin에게 전송합니다.

구성은 다음과 같습니다.

upstream blogApi{
    server :;
}

upstream blogFe{
    server :;
}

server {
    listen ;
    server_name localhost;
    location /api/ {
        proxy_pass http://blogApi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location / {
        proxy_pass http://blogFe;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}