'VueJS' 카테고리의 글 목록

VueJS

Vue3 google SEO 등록하기 2022.04.15
AWS 에 Jenkins와 Nginx 이용하여 vue project 올리기 2022.01.02
array / object prototype 2021.06.27

Vue3 google SEO 등록하기

2022. 4. 15. 17:27

728x90

SEO의 기본 세팅은 다음과 같이 설정한다.

페이지마다 캐노니컬 태그를 설정

<!DOCTYPE html>
<html>
<head>
  <link rel="canonical" href="https://example.com/page.php" />
</head>
<body>
...
</body>
</html>

태그와 메타 설정
이미지 태그에 alt, head에 메타데이터, title은 페이지마다 달라야 하며 link에 alt도 붙여야한다.
apple.com은 SEO를 위해 다음과 같이 meta tag를 설정해 놓았다
- apple home(www.apple.com)

- apple watch(www.apple.com/watch)
페이지 속도 개선
PageSpeedInsights에서 웹페이지 속도 개선에 대해 리포팅을 받아볼 수 있다.
구조화
HTML5의 tag들이 sementic 하게 맞춰 설계되어야한다. https://search.google.com/test/rich-results
사이트맵의 정기적인 관리
사이트맵을 주기적으로 갱신한다.

Vue 프로젝트를 google SEO에 등록하기 위해서는 크게 2가지 방법이 있다.

vue-meta 이용하여 페이지별 meta tag 작성
prerender-spa-plugin 이용하여 SSR 페이지 만들기

첫번째 방법이 보다 편하므로 페이지별 meta tag를 이용하여 Vue 프로젝트의 SEO를 구현토록하자.

vue-meta 라이브러리를 프로젝트에 설치한다.
현시점 vue3에 적용가능한 vue-meta 라이브러리는 3.0.0-alpha.10 까지 나와있다
```
npm i --save vue-meta@alpha
```

vue가 vue-meta 플러그인을 사용할 수 있도록 해당 플러그인 라이브러리를 등록한다

//main.ts
import { createApp } from 'vue';
import { createMetaManager } from 'vue-meta';
import App from './App.vue';

app
  .use(createMetaManager())
  .mount('#app');

default meta tag를 설정한다
- index.html 설정
og란: open graph의 약자로 어떤 HTML 문서의 메타정보를 쉽게 표기하기 위해서 메타정보에 해당하는 제목, 설명, 문서타입, 대표 URL등을 정의할 수 있게해주는 프로토콜.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="robots" content="ALL">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>식물의언어 : 식집사를 위한 식물 정보 플랫폼</title>

    <!--og, meta-->
    <!--기본적으로 웹에 설정해줘야하는 og 메타태그 및 Naver 블로그, 카카오톡 미리보기 설정-->
    <meta property="og:type" content="website">
    <!-- <meta property="og:url" content="https://www.plantslang.com/"> -->
    <meta id="meta_og_title" property="og:title" content="식물의언어">
    <meta id="meta_og_image" property="og:image" content="opengraph.webp">
    <!-- <meta property="og:description" content="식집사를 위한 식물 정보 플랫폼, 식물의언어를 찾아오세요"> -->
    <meta property="og:site_name" content="식물의언어">
    <meta property="og:locale" content="ko_KR">
    <meta property="og:width" content="1200">
    <meta property="og:height" content="630">


    <!-- <meta name="description" content="식집사를 위한 식물 정보 플랫폼, 식물의언어를 찾아오세요"> -->
    <!-- <meta name="keywords" content="식물의언어, 식물의언어, 식물, plantslang"> -->

    <!--phone 설정-->
    <meta name="theme-color" content="#365650">
    <meta name="msapplication-navbutton-color" content="#365650">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="application-name" content="식물의언어">
    <meta name="msapplication-tooltip" content="식물의언어">
    

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

만약 description의 주석처리를 해제한다면 뒤에 vue-meta로 설정한 description과 중복이 발생하게 된다.
중복이 발생하면 두개의 description을 이어 붙인다. 즉, 모든 페이지 별로 description이 중복되는 현상이 발생된다.
https://www.searchenginejournal.com/google-on-how-it-handles-extra-meta-descriptions-and-title-tags/368600/#close

페이지(route)별 meta tag를 설정한다.

'VueJS' 카테고리의 다른 글

AWS 에 Jenkins와 Nginx 이용하여 vue project 올리기 (0)	2022.01.02
array / object prototype (0)	2021.06.27

AWS 에 Jenkins와 Nginx 이용하여 vue project 올리기

2022. 1. 2. 05:20

728x90

Overview

AWS에 Jenkins와 Nginx를 이용하여 vue project를 올리는 방법에 대하여 알아보자

이 때 git repository에 project commit이 push 될때 자동으로 빌드가 이루어지도록한다 (CD)

EC2에 linux (or window) 인스턴스 생성
EC2 인스턴스에 Security Group 설정
git webhook 설정
git credential token 발급
EC2에 에 Jenkins 및 daemonize 문제 해결
Jenkins 설정 변경 (git credential, item 생성)
EC2에 nginx 설치
nginx 설정 변경(conf.d)
빌드!

1. EC2에 linux 인스턴스 생성

관련 내용은 쉽고 넷상에 많이 나오므로 링크로 생략

https://victorydntmd.tistory.com/61

[AWS] EC2 (1) - EC2 인스턴스 생성하기

2020.02.06 수정 1. 서비스 소개 AWS EC2는 간단하게 가상서버라고 생각할 수 있으며, 몇 가지 주요 특징은 다음과 같습니다. 클릭 몇 번 만으로 가상 컴퓨팅 환경을 제공받을 수 있음 원하는 만큼 가

victorydntmd.tistory.com

2. EC2 인스턴스에 Security Group 설정

aws console EC2 > 사용할 인스턴스 Detail로 페이지 > Security tab > secity groups 클릭

Edit inbound rules > 다음 개방 포트 추가

8080은 Jenkins가 작동할 포트이다. Jenkins 설정 변경을 위해 접속할 일이 있으니 열어두도록하자. 단, 진짜 서비스의 경우 개방 범위를 0.0.0.0/0으로 하면 모든 사람이 들어올 수 있으니 이 때는 제한하도록 하자.

포트 3000이나 80 둘중 하나만 열어도 된다. 웹서버 nginx가 web application을 띄울 포트를 열도록한다. 모든 사람이 접속할 수 있어야 하므로 개방 범위를 0.0.0.0/0으로 설정하자.

3. github webhook 설정 및 developer authentication 생성

GitHub Webhook

Webhook을 사용하면 GitHub Apps 또는 OAuth Apps와 같은 integration을 빌드하거나 설정할 수 있다.
이러한 이벤트(예: commit code) 중 하나가 트리거되면 HTTP POST Payload를 webhook에 설정된 URL로 보낸다.
webhook을 이용해 CI 빌드를 트리거하거나 production 서버에 배포할 수 있다.

vue project 의 repository > setting 탭 > webhook 탭

Payload URL : "EC2에서 Jenkins 서비스 URL"/github-webhook/
- webhook POST request를 받을 서버의 URL 정의. jenkins의 경우 뒤에 github-webhook/ path를 명시해줘야 한다.
Content type: application/json
- webhoook을 어떤 형태로 받을지에 대한 정의. 여기서는 json으로 받음
Just the push event
- push event가 발생했을 시에만 webhook이 trigger되도록 함

4. git personal access token 발급

내 프로필 > settings > Developer settings 탭 > Personal access tokens 탭 > Generate new token > repo 체크

발급된 personal access token를 꼭 기억하도록 한다

git에서의 setting이 모두 끝났다. 이제 Jenkins 설치 및 설정 과정에대해 알아보자.

5. EC2에 Jenkins 및 Git 설치

Jenkins 설치

Jenkins 설치 방법은 넷상에 널려 있으니 이 또한 링크로 대체

https://bokyung.dev/2021/03/17/jenkins-install/

Amazon Linux2에 Jenkins 설치하기

로컬 도커환경에서 Jenkins를 테스트 하던 중에 에러가 나는 경우가 있어서 검증을 위해서 Amazon Linux2에 Jenkins를 설치 해 보았습니다. 설치한 Jenkins 환경 Amazon Linux2 AMI ID : ami-0f27d081df46f326c AMI 이름 :

bokyung.dev

만약 설치 중간에 다음의 에러가 발생한다면

$ sudo yum install jenkins
...
Error: Package: jenkins-2.319.1-1.1.noarch (jenkins)
           Requires: daemonize
 You could try using --skip-broken to work around the problem
 You could try running: rpm -Va --nofiles --nodigest

다음의 명령어를 실행 시킨후 jenkins를 설치한다

$ sudo amazon-linux-extras install epel -y
$ sudo yum install jenkins

Git 설치

https://gamoo12.tistory.com/205

[AWS] EC2 인스턴스에서 git 설치 방법

AWS EC2에서 git 설치 AWS의 EC2 인스턴스 중 Amazon Linux 2에 git을 설치하는 방법을 알아보았습니다. Yum을 이용하면 쉽게 git 설치가 가능합니다. Yum은 Yellow dog Updater, Modified의 약자로 RPM 기반의..

gamoo12.tistory.com

6. Jenkins git 연결 및 item 생성 (git credential, item 생성)

nodejs 환경 생성

시작하기 전 nodejs 환경을 만들어주기 위해 플러그인을 설치해주자.

jenkins 관리 > 플러그인 관리 > 설치 가능 탭 > nodejs 검색

설치가 완료되었다면 (jenkins service restart까지) jenkins 관리 > global tool configuration > NodeJs 환경 생성

git personal access token credential 저장

이전에 설정했던 github webhook을 설정하기 위해 jenkins에 git personal access token credential을 저장하도록하자.

jenkins 관리 > Manage Credentials > (global) > Add Credentials > 내용 입력

Kind: Username with password
Scope : Global
Username : git username
password : 이전에 발급받은 git personal access token
ID : 임의로 지은 식별자

Item 생성

새로운 Item > 아이템 이름 지정 및 Freestyle project 선택 > 소스코드 관리에서 Git radio button 체크 > 다음 내용 입력

Repository URL : vue project git HTTPS 주소
Credential : 이전에 생성한 git personal access token credentail 선택

GitHub hook trigger for GITScm polling 체크 (webhook trigger) > Provide Node & npm bin/ folder to PATH 체크 > 이전에 만든 nodejs 환경 선택

Build Execute shell 선택 및 해당 내용 입력

asdfeeeee 는 내가 만든 Jenkins Item 이름이다. 각자의 이름에 맞게 변경토록하자.

npm run build는 만약 build 명령어가 다르다면 해당 명령어로 입력하면 된다.

7. nginx 설치

https://velog.io/@ant-now/AWS-%EC%84%9C%EB%B2%84%EC%97%90-Nginx-%EC%84%A4%EC%B9%98

AWS 서버에 AMI Nginx 설치

sudo yum install nginx 로 안됨. 왜냐면 아마존 리눅스에서 사용하는 엔진엑스가 따로 있기 때문sudo amazon-linux-extras install nginx1 로 설치하자.Amazon Linux 2 FAQs(https://aws.amaz

velog.io

8. nginx build file 경로 지정 및 서비스 포트 설정

$ cd /etc/nginx/conf.d
$ vim default.conf //아무 이름이나 만들어도 된다.

// default.conf에 다음내용을 입력한다.

server {
        listen 80       default_server;
        listen  [::]:80 default_server;

        root    /var/lib/jenkins/workspace/asdfeeeee/dist;
        index   index.html      index.htm;
        server_name     _;

        location/{
                try_files	$uri    $uri/   /index.html;
        }
}

//설정 완료후
$ sudo service nginx restart

웹 페이지를 80번 포트에서 서비스 하기위해 80번 포트를 열었다.
root의 경로를 build 시 build 파일이 생성되는 "jenkins item 경로"/dist 로 지정했다.
입력 한 conf값 저장후 nginx 웹서버를 재시작한다.

※만약 wq! 로 저장이 안된다면 현재 ec2-user linux 계정이 저장할 권한이 없는 것이다. 미리 sudo su 로 권한을 root로 변경하던지 저장할때 wq! 대신 w !sudo tee % > /dev/null 로 저장한다.

이제 public ip로 접속하면 만들어진 화면이 나옴을 볼 수 있다.

'VueJS' 카테고리의 다른 글

Vue3 google SEO 등록하기 (0)	2022.04.15
array / object prototype (0)	2021.06.27

array / object prototype

2021. 6. 27. 14:44

728x90

Array

Array.apply(null,Array(length))

특정 길이의 iterable한 Array 객체를 생성한다.

Array(7) // [,,,,,,,] 길이가 7인 배열. not iterable
Array.apply(null,Array(7)) // == Array(undefined,undefined,...,undefined) 길이가 7인 undefined 배열, iterable

Array.apply(null,Array(7)).map((el,i)=> i) // [0,1,2,3,4,5,6]

Array.of()

전달인자의 개수나 데이터 타입에 관계없이 새 배열 인스턴스를 생성한다.

Array.of(7); // [7]
Array.of(1,2,3) // [1,2,3]

Array(7) // [ , , , , , ,] 길이가 7인 배열
Array(1,2,3) // [1,2,3]

Array.prototype.entries()

배열의 각 익덱스에 대한 key/value 쌍을 가지는 새로운 Array Iterator 객체를 반환한다.

const arr = ['a','b','c'];

const iterator = arr.entries();

console.log(iterator.next().value);// [0,'a']

console.log(iterator.next().value);// [1,'b']

for( const [key,value] of arr.entries()){
  console.log(key, value) 
}
// 0,'a'
// 1,'b'
// 2.'c'

Array.prototpye.shift() / Array.prototype.unshift()

shift()
- 배열에서 첫 번째 요소를 삭제하고 그 요소를 반환한다.
unshift()
- 배열에서 첫 번째 요소를 추가하고 새로운 길이를 반환한다.

let arr = ['a','b','c'];

arr.shift();
console.log(arr);// ['b','c']

const newLength = arr.unshift('d'); 
console.log(arr); //['d','b','c']
console.log(newLength);// 3

Array.prototype.splice()

배열에서 요소를 추가/삭제 하고 삭제한 요소 배열을 반환한다.

let arr = ['a','b','c'];
arr.splice(1,2,'k');
console.log(arr) // ['a','k']

Array.prototype.join()

배열의 모든 요소를 연결해 하나의 문자열로 만든다.

let arr = ['a','b','c'];
console.log(arr.join('-'));//'a-b-c'
console.log(arr.join(''));//'abc'

Array.prototype.indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

let arr = ['a','a','b'];
console.log(arr.indexOf('a')) // 0
console.log(arr.indexOf('a',2)) //1
console.log(arr.indexOf('c') // -1

Array.prototype.keys()

배열의 각 _인덱스_를 키 값으로 가지는 새로운 Array Iterator객체를 반환한다.

let arr =['a','b','c'];
const iterator = arr.keys();

for(const key of iterator){
  console.log(key);
} // 0
  // 1
  // 2

Array.prototype.flat()

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

let arr = ['a',['b','c'],[['d','e']]];
console.log(arr.flat()); // ['a','b','c',['d','e']]
console.log(arr.flat(2)); // ['a','b','c','d','e']
console.log(arr.flat(Infinity))//['a','b','c','d','e']

Array.prototype.flatMap();

먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 flatten한다. 기본적으로 flat depth는 1이다.

let arr = [1,2,3];

arr.map(item=>item*2); // [2,4,6]

arr.map(item=>[item*2]) // [[2],[4],[6]]
arr.flatMap(item=>[item*2]) // [2,4,6]

arr.flatMap(item=>[[item*2]]) // [[2],[4],[6]]

Array.from()

array-like object나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.

console.log(Array.from('foo')); // ['f','o','o']

console.log(Array.from([1,2,3],x=>x+x); // [2,4,6]

Object

Object.assign()

하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사한다. 같은 key는 덮어씌워 새로운 값으로 갱신한다.

const target = {a:1,b:2};
const source = {b:4,c:5};

const returnTarget = Object.assign(target,source);

console.log(returnTarget); // {a:1,b:4,c:5}

console.log(target); // {a:1,b:4,c:5} target도 값이 갱신된다!!

Object.freeze()

객체의 값을 변경할 수 없도록 동결한다. Object의 const라고 보면될듯하다.

const obj = {
  prop: 42
};

obj.prop = 41;

console.log(obj.prop); // 41

Object.freeze(obj); 

obj.prop = 40; // error in strict mode

console.log(obj.prop) // 41

String

String.prototype.match()

문자열이 정규식과 매치도는 부분을 검색한다.

var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found);

String.prototype.padEnd() / String.prototype.padStart()

현재 문자열에 다른 문자열을 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다.

console.log(`abc`.padEnd(10)); // 'abc       '
console.log(`abc`.padEnd(10,'foo')); // `abcfoofoof`
console.log(`abc`.padEnd(6,'123456')); // `abc123`
console.log(`abc`.padEnd(1)); // `a`

String.prototype.slice()

문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

console.log(`abc`.slice(1)) // bc
console.log(`abc.slice(0,1)) // a
console.log(`abc`.slice(-1)) // c
console.log(`abc`.slice(-3,-2) // a

String.prototype.split()

지정한 구분자를 이용하여 여러개의 문자열로 나눈다

console.log(`ab cd`.split(' ')); // ['ab'.'cd']
console.log(`ab cd`.split('')); //['a','b',' ','c','d']
console.log(`ab cd`.split()); // ['ab cd']

String.prototype.substring()

문자열의 시작 인덱스부터 종료 인덱스 전까지 문자열의 부분 문자열을 반환한다.

const str = 'abcde'

console.log(str.substring(1,3)); // bc

console.log(str.substring(2)); // cde

String.prototype.trim() / String.prototype.trimEnd() / String.prototype.trimStart()

trim
- 양끝의 공백(space, tab, NBSP)을 제거해준다.
trimEnd
- 뒤의 공백을 제거해준다.
trimStart
- 앞의 공백을 제거해준다.

const str = ' abcd '

console.log(str.trim()); 'abcd'
console.log(str.trimEnd()); ' abcd'
console.log(str.trinStart()); 'abcd '

Proxy

특정 객체(array,object)를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 intercept하는 객체로 작업은 Proxy 자체에서 처리하기도 하고, 원래 객체가 처리하도록 넘겨주기도한다.

참고사이트1
참고사이트2

'VueJS' 카테고리의 다른 글

Vue3 google SEO 등록하기 (0)	2022.04.15
AWS 에 Jenkins와 Nginx 이용하여 vue project 올리기 (0)	2022.01.02

PREV 1 NEXT

코딩하는 폴제트

VueJS

Vue3 google SEO 등록하기

'VueJS' 카테고리의 다른 글

AWS 에 Jenkins와 Nginx 이용하여 vue project 올리기

Overview

1. EC2에 linux 인스턴스 생성

2. EC2 인스턴스에 Security Group 설정

3. github webhook 설정 및 developer authentication 생성

4. git personal access token 발급

5. EC2에 Jenkins 및 Git 설치

Jenkins 설치

Git 설치

6. Jenkins git 연결 및 item 생성 (git credential, item 생성)

nodejs 환경 생성

git personal access token credential 저장

Item 생성

7. nginx 설치

8. nginx build file 경로 지정 및 서비스 포트 설정

'VueJS' 카테고리의 다른 글

array / object prototype

Array

Array.apply(null,Array(length))

Array.of()

Array.prototype.entries()

Array.prototpye.shift() / Array.prototype.unshift()

Array.prototype.splice()

Array.prototype.join()

Array.prototype.indexOf()

Array.prototype.keys()

Array.prototype.flat()

Array.prototype.flatMap();

Array.from()

Object

Object.assign()

Object.freeze()

String

String.prototype.match()

String.prototype.padEnd() / String.prototype.padStart()

String.prototype.slice()

String.prototype.split()

String.prototype.substring()

String.prototype.trim() / String.prototype.trimEnd() / String.prototype.trimStart()

Proxy

'VueJS' 카테고리의 다른 글

+ Recent posts

티스토리툴바