Merge branch 'dev'

.dockerignore

@@ -0,0 +1,31 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+jsconfig.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+# Coverage
+coverage/
+
+# Docker-specific files
+.storybook
+.git
+stories
+tests

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+charset = utf-8

.env.example

@@ -0,0 +1,4 @@
+VUE_APP_FIREBASE_CONFIG=
+VUE_APP_FIREBASE_VAPID_KEY=
+VUE_APP_CHANNEL_PLUGIN_KEY=
+VUE_APP_API_HOST= # api 주소 (명시하지 않으면 dev/prod 서버 api로 연결)

.eslintrc.js

@@ -1,17 +1,32 @@
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
+
+  extends: [
+    'plugin:vue/recommended',
+    '@vue/standard',
+    '@vue/typescript'
   ],
+
   rules: {
     // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: 2
+      }
+    ],
+    'vue/require-default-prop': 0,
+    'array-bracket-spacing': 0,
+    'vue/no-v-html': 0,
+    'vue/no-template-shadow': 0
   },
+
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@typescript-eslint/parser'
   }
-}
+}

.github/workflows/aws.yml

@@ -0,0 +1,87 @@
+# This workflow will build and push a new container image to Amazon ECR,
+# and then will deploy a new task definition to Amazon ECS, when a release is created
+#
+# To use this workflow, you will need to complete the following set-up steps:
+#
+# 1. Create an ECR repository to store your images.
+#    For example: `aws ecr create-repository --repository-name my-ecr-repo --region us-east-2`.
+#    Replace the value of `ECR_REPOSITORY` in the workflow below with your repository's name.
+#    Replace the value of `aws-region` in the workflow below with your repository's region.
+#
+# 2. Create an ECS task definition, an ECS cluster, and an ECS service.
+#    For example, follow the Getting Started guide on the ECS console:
+#      https://us-east-2.console.aws.amazon.com/ecs/home?region=us-east-2#/firstRun
+#    Replace the values for `service` and `cluster` in the workflow below with your service and cluster names.
+#
+# 3. Store your ECS task definition as a JSON file in your repository.
+#    The format should follow the output of `aws ecs register-task-definition --generate-cli-skeleton`.
+#    Replace the value of `task-definition` in the workflow below with your JSON file's name.
+#    Replace the value of `container-name` in the workflow below with the name of the container
+#    in the `containerDefinitions` section of the task definition.
+#
+# 4. Store an IAM user access key in GitHub Actions secrets named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
+#    See the documentation for each action used below for the recommended IAM policies for this IAM user,
+#    and best practices on handling the access key credentials.
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - dev
+      - master
+  release:
+    types: [created]
+
+name: Deploy to Amazon ECR newara-front
+
+env:
+  AWS_REGION: ap-northeast-2
+  ECR_REPOSITORY: newara-front
+  FIREBASE_CONFIG_PROD: ${{ secrets.FIREBASE_CONFIG_PROD }}
+  FIREBASE_CONFIG_DEV: ${{ secrets.FIREBASE_CONFIG_DEV }}
+  FIREBASE_VAPID_KEY_PROD: ${{ secrets.FIREBASE_VAPID_KEY_PROD }}
+  FIREBASE_VAPID_KEY_DEV: ${{ secrets.FIREBASE_VAPID_KEY_DEV }}
+  CHANNEL_PLUGIN_KEY: ${{ secrets.CHANNEL_PLUGIN_KEY }}
+
+defaults: # do we need this?
+  run:
+    shell: bash
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-20.04
+    permissions:
+      packages: write
+      contents: read
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{env.AWS_REGION}}
+
+    - name: Login to Amazon ECR
+      id: login-ecr
+      uses: aws-actions/amazon-ecr-login@v1
+
+    - name: Build, tag, and push image to Amazon ECR
+      id: build-image
+      env:
+        ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+        ECR_REPOSITORY: ${{env.ECR_REPOSITORY}}
+        IMAGE_TAG: ${{ github.sha }}
+      run: |
+        # Build a docker container and
+        # push it to ECR so that it can
+        # be deployed to ECS.
+        chmod +x ./.github/workflows/github-actions.sh
+        . ./.github/workflows/github-actions.sh
+        docker build --cache-from $ECR/$PROJECT_NAME:$CACHE_DOCKER_TAG --build-arg VUE_APP_API_MODE --build-arg VUE_APP_FIREBASE_CONFIG --build-arg VUE_APP_FIREBASE_VAPID_KEY --build-arg VUE_APP_CHANNEL_PLUGIN_KEY -t $ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG .
+        docker push $ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG
+        echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG"

.github/workflows/github-actions.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+
+# GITHUB_REF: refs/heads/<branch_name>, refs/tags/<tag_name>
+if [ ! -z $GITHUB_REF ]; then
+    TRIGGER_TYPE=$(echo $GITHUB_REF | cut -d '/' -f2)
+    NAME=$(echo $GITHUB_REF | cut -d '/' -f3-)
+
+    if [ $TRIGGER_TYPE = "heads" ]; then
+        if [ $NAME = "master" ]; then
+            export DOCKER_TAG=prod
+            export CACHE_DOCKER_TAG=prod
+            export VUE_APP_API_MODE=production
+            export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_PROD
+            export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_PROD
+            export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
+        else
+            # Docker tag에 /가 들어갈 수 없어서 -로 변경
+            export DOCKER_TAG=$(echo $NAME | sed -e "s/\//-/g")
+            export CACHE_DOCKER_TAG=dev
+            export VUE_APP_API_MODE=development
+            export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_DEV
+            export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_DEV
+            export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
+        fi
+    elif [ $TRIGGER_TYPE = "tags" ]; then
+        export DOCKER_TAG=$NAME
+        export CACHE_DOCKER_TAG=prod
+        export VUE_APP_API_MODE=production
+        export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_PROD
+        export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_PROD
+        export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
+    fi
+fi
+
+echo $TRIGGER_TYPE $CACHE_DOCKER_TAG $DOCKER_TAG

.gitignore

@@ -3,8 +3,10 @@ node_modules
 /dist
 
 # local env files
+.env
 .env.local
 .env.*.local
+swenv.js
 
 # Log files
 npm-debug.log*

.postcssrc.js

@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {}
   }
-}
+}

.storybook/webpack.config.js

@@ -1,18 +1,19 @@
 const path = require('path')
 
 module.exports = {
-    module: {
-     rules: [
-     {
+  module: {
+    rules: [
+      {
         test: /\.scss$/,
         loaders: ['style-loader', 'css-loader', 'sass-loader'],
         include: path.resolve(__dirname, '../')
-     },
-     {  test: /\.css$/,
+      },
+      {
+        test: /\.css$/,
         loader: 'style-loader!css-loader',
         include: __dirname
-     },
-     {
+      },
+      {
         test: /\.(woff|woff2)$/,
         use: {
           loader: 'url-loader',
@@ -21,17 +22,23 @@ module.exports = {
             limit: 5000,
             mimetype: 'application/font-woff'
           }
-         }
-     },
-     {
-       test: /\.(ttf|eot|svg|png)$/,
-       use: {
+        }
+      },
+      {
+        test: /\.(ttf|eot|svg|png)$/,
+        use: {
           loader: 'file-loader',
           options: {
             name: 'fonts/[hash].[ext]'
           }
-       }
-     }
-   ]
- }
-}
+        }
+      }
+    ]
+  },
+
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '..', 'src')
+    }
+  }
+}

Dockerfile

@@ -0,0 +1,41 @@
+ARG WORKDIR=/usr/src/app
+
+# Build Project
+FROM node:14.9-alpine as build
+ARG WORKDIR
+
+WORKDIR $WORKDIR
+
+# Install build dependencies
+RUN apk add --no-cache --virtual .build-deps python build-base
+
+# Copy package files
+COPY package*.json ./
+
+# Install npm packages
+RUN npm install
+
+# Delete dependencies
+RUN apk del --purge .build-deps
+
+# Copy other sources
+COPY . .
+
+ARG VUE_APP_API_MODE
+ARG VUE_APP_FIREBASE_CONFIG
+ARG VUE_APP_FIREBASE_VAPID_KEY
+ARG VUE_APP_CHANNEL_PLUGIN_KEY
+RUN echo "VUE_APP_API_MODE=$VUE_APP_API_MODE" >> .env
+RUN echo "VUE_APP_FIREBASE_CONFIG=$VUE_APP_FIREBASE_CONFIG" >> .env
+RUN echo "VUE_APP_FIREBASE_VAPID_KEY=$VUE_APP_FIREBASE_VAPID_KEY" >> .env
+RUN echo "VUE_APP_CHANNEL_PLUGIN_KEY=$VUE_APP_CHANNEL_PLUGIN_KEY" >> .env
+RUN npm run build
+
+FROM nginx:1.19-alpine as newara-web
+ARG WORKDIR
+ARG VUE_APP_API_MODE
+
+WORKDIR /usr/share/nginx/newara
+
+COPY --from=build $WORKDIR/dist ./
+COPY ./nginx/nginx-$VUE_APP_API_MODE.conf /etc/nginx/conf.d/default.conf

README.md

@@ -2,25 +2,32 @@
 <br />
 <br />
 <p align="center">
-  <a href="https://github.com/github_username/repo">
-    <img src="src/assets/Services-Ara.png" alt="Logo" height="150">
+  <a href="https://newara.sparcs.org">
+    <img src="src/assets/ServiceAra.svg" alt="Logo" height="150">
   </a>
 
   <p align="center">
-    <img src="https://api.netlify.com/api/v1/badges/3a7e4374-00d4-4773-b170-95fc638526e6/deploy-status"/>
-    <img src="https://img.shields.io/badge/version-1.0-informational.svg" />
-    <img src="https://img.shields.io/badge/stage-OBT-critical.svg" />
+    <a href="https://app.netlify.com/sites/ara-beta-dev/deploys">
+      <img src="https://api.netlify.com/api/v1/badges/f89352b5-5a1b-4d69-9753-1cfa7d30e330/deploy-status" alt="Netlify Status"/>
+    </a>
+    <a href="https://github.com/sparcs-kaist/new-ara-web/actions/workflows/aws.yml">
+      <img src="https://github.com/sparcs-kaist/new-ara-web/actions/workflows/aws.yml/badge.svg" alt="Deploy to Amazon ECR newara-front"></>
+    </a>
+    <img src="https://img.shields.io/badge/version-2.0-informational.svg" />
     <img src="https://img.shields.io/badge/license-MIT-black.svg" />
     <img src="https://img.shields.io/badge/vue-2.x-41b883.svg" />
   </p>
 
+
   <p align="center">
     All-new ara with modern JS, designed and developed by SPARCS
     <br />
-    <a href="https://ara-beta.sparcs.org">Go to Ara</a>
+    <a href="https://newara.sparcs.org">Go to Ara</a>
   </p>
 </p>
 
+
+
 # About
 new-ara 는 카이스트 교내 커뮤니티인 ARA 의 리뉴얼 프로젝트입니다. KAIST 오픈소스 동아리 SPARCS 에서 개발하고 있습니다.
 

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
+    [ '@vue/cli-plugin-babel/preset' ], [ '@babel/preset-env' ]
+  ],
+  plugins: [ '@babel/plugin-transform-runtime' ]
 }