소개

Vue.js와 TypeScript로 웹 서비스를 만들고 싶지만 아이디어 떠오르지 않았기 때문에 옛날 만든 앱을 다시 만들었습니다.

만든 것

Qnow
Qiita에서 신규 투고된 기사만을 취득해 표시하는 서비스입니다.
태그 이름으로 필터링하여 표시합니다.

표시된 기사의 태그 이름을 클릭하여 클릭한 태그 이름으로 다시 검색할 수 있습니다.
다만, 지금의 사양이라고 날짜가 바뀌고 곧이라고 기사를 취득할 수 없기 때문에 나중에 변경하려고 생각합니다.

사용한 기술

Vue.js

TypeScript

Github

소스 코드 관리

CircleCi

master로 푸시되면 빌드 및 배포를 실행합니다.

Firebase

정적 파일 배달

Vue.js

Vue Cli3을 사용했습니다.
Vue Cli3에서는 TypeScript가 정식 채용되어 있으므로 TypeScript를 사용했습니다.
하지만 TypeScript를 전혀 쓴 적이 없어 any형을 사용하고 있는 곳이 좀 있어 수정을 하고 싶습니다.
Vue의 단일 컴포넌트는 스타일에 스코프를 맞출 수 있기 때문에 매우 편리하네요.
CSS는 SASS의 SCSS 표기법으로 작성되었습니다. 이것도 표준으로 지원하고 있기 때문에 편했습니다.

Github

소스 코드를 관리하는 데 사용했습니다.
영어가 전혀 모르기 때문에 Google 번역으로 번역하면서 커밋 메시지를 썼기 때문에 이상한 커밋 메시지가 많을지도 모릅니다.

CircleCi

Github에 push되면 빌드하고 자동으로 배포하도록 했습니다.

circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10.15.3
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
        # 復元するキャッシュのkey
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            - v1-dependencies-
      # 依存関係インストール
      - run:
          name: Install Project
          command: npm install

      # ビルド
      - run:
          name: Build
          command: npm run build

      # ビルドの確認  
      - run:
          name: Check dist
          command: ls -la dist

      # キャッシュの保存
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run:
          name: Install Firebase-tools
          command: npm install --save-dev firebase-tools

      - run:
          name: Deploy to Firebase hosting
          command: ./node_modules/.bin/firebase deploy --project "$FIREBASE_PROJECT_ID" --token "$FIREBASE_DEPLOY_TOKEN"

설정 절차

CircleCi에 로그인

Github 계정으로 로그인했다고 생각하기 때문에 프로젝트가 연결됩니다

Github 저장소에 .circleci/config.yml 추가

Github에 Push 할 때마다 빌드가 실행됩니다.

firebase에서 프로젝트 만들기

firebase에서 firebase-tools 설치

firebase에 로그인

$ firebase login

화면에 따라 로그인
8. firebase를 CI에서 사용하기 위해 다음 명령을 치십시오.

$ firebase login --reauth
$ firebase login:ci

이제 토큰을 얻을 수 있습니다.
9. .circleci/config.yml에 firebase에 배포하는 명령 추가
10. CircleCi의 설정에서 firebase token 및 firebase 프로젝트 ID 추가

결론

이 서비스를 개발할 때 자신의 기술의 부족을 다시 알 수 있었습니다.
앞으로도 매일 공부를 하려고 합니다.
좋으면 피드백 받을 수 있으면 기쁩니다.
소스 코드 : htps : // 기주 b. 이 m/g바-3/q의 w