mooon๐ŸŒ™
STUDY
mooon๐ŸŒ™
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (170)
    • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ (147)
      • ๋ฐฑ์ค€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (53)
      • [ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] Lv1 (13)
      • [ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ์ž…๋ฌธ (54)
      • [ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค] SQL ๊ณ ๋“์  Kit (27)
    • BACK (4)
      • Spring (3)
      • PHP (0)
    • FRONT (5)
    • DevOps (8)
      • Jenkins (8)
    • GitHub๐ŸŒฑ (2)
    • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค (1)
      • SQL (1)
    • Error ๐Ÿ’ฅ (0)
      • php (2)
    • ๐Ÿ˜‹ (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • โญ ๊นƒํ—ˆ๋ธŒ
  • ๐Ÿ’• ๋ฐฉ๋ช…๋ก
  • ๐Ÿ’ฅ ํƒœ๊ทธ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • SQL
  • ๋ฐฑ์ค€
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • Python
  • c++
  • DevOps
  • SQL ๊ณ ๋“์  Kit
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์ž…๋ฌธ
  • ๋‹ค์ด๋‚˜๋ฏน ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ตœ๊ทผ ๊ธ€

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.
mooon๐ŸŒ™

STUDY

AWS S3 ๋ฒ„ํ‚ท์œผ๋กœ Vue ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ
FRONT

AWS S3 ๋ฒ„ํ‚ท์œผ๋กœ Vue ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ

2020. 3. 8. 22:45
728x90

1. S3 ๋ฒ„ํ‚ท ๋งŒ๋“ค๊ธฐ

๋ฒ„ํ‚ท ์ด๋ฆ„์„ ์ž…๋ ฅํ•˜๊ณ  ๊ณ„์†ํ•ด์„œ ๋‹ค์Œ์„ ๋ˆ„๋ฅธ ๋’ค, ๋ฒ„ํ‚ท ์ƒ์„ฑ

 

2. ๊ถŒํ•œ -> ํผ๋ธ”๋ฆญ ์•ก์„ธ์Šค ์ฐจ๋‹จ

๋ชจ๋“  ํผ๋ธ”๋ฆญ ์•ก์„ธ์Šค ์ฐจ๋‹จ ์ฒดํฌ๋ฅผ ํ’€์–ด์ค€ ๋’ค, ์ €์žฅ

 

3. ๊ถŒํ•œ -> ๋ฒ„ํ‚ท ์ •์ฑ…

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::S3๋ฒ„ํ‚ท์ด๋ฆ„/*"
        }
    ]
}

์œ„์™€ ๊ฐ™์ด ์ž…๋ ฅํ•˜๊ณ  ์ €์žฅ 

 

 

4. Vue ํ”„๋กœ์ ํŠธ build

npm run build

 

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž…๋ ฅํ•˜๋ฉด ํ”„๋กœ์ ํŠธ build๊ฐ€ ๋˜๊ณ , ํ”„๋กœ์ ํŠธ ํด๋”์— 'dist' ํด๋”๊ฐ€ ์ƒ์„ฑ๋จ

 

build๋กœ ์ƒ์„ฑ๋œ dist ํด๋”

5. S3 ๋ฒ„ํ‚ท์— ํŒŒ์ผ ์—…๋กœ๋“œ

๊ฐœ์š” -> ์—…๋กœ๋“œ์—์„œ dist ํด๋”์— ์žˆ๋Š” ํŒŒ์ผ๊ณผ ํด๋”๋ฅผ ์ „๋ถ€ ์—…๋กœ๋“œ ํ•ด์ค€๋‹ค. ๊ทธ ํ›„ ๊ณ„์† ๋‹ค์Œ ํด๋ฆญํ•ด์„œ ์—…๋กœ๋“œ

 

6. ์ •์  ์›น ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŒ…

์ •์  ์›น ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŒ…์„ ์œ„์™€ ๊ฐ™์ด ํ™œ์„ฑํ™” ์‹œํ‚ค๊ณ , ์ธ๋ฑ์Šค ๋ฌธ์„œ์— 'index.html'์„ ์ž…๋ ฅํ•œ ๋’ค ์ €์žฅ

 

7. ์—”๋“œ ํฌ์ธํŠธ ์ฃผ์†Œ๋กœ ์ ‘๊ทผ

์—”๋“œ ํฌ์ธํŠธ ์ฃผ์†Œ๋กœ ์ ‘๊ทผํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฐฐํฌ๋œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค

 

728x90
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)
    'FRONT' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [React] react-router-dom
    • [React] ant Design ์‚ฌ์šฉํ•˜๊ธฐ
    • [React] ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ
    • [Vue] Vue ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ
    mooon๐ŸŒ™
    mooon๐ŸŒ™
    ๊ฐœ๋ฐœ ๊ณต๋ถ€ ๊ธฐ๋ก

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”