4. vue.js 웹페이지 구현
도메인과 웹 프로바이더.
Hostinger 에서 구매하여 도메인과 프로바이더 모두 제공받음
도메인
lajanciadev.com
웹사이트 import
해당 도메인 manage를 통해 website import에서 제작한 웹사이트를 업로드한다.
만든건 별로 없지만 용량이 커서인지 시간이 조금 걸린다.
정상적으로 등록되었을 경우, 위와 같이 뜬다. default.php를 삭제하라고 한다.
다시 이전 사이트로 돌아가 go to file manager 을 확인한다.
Issue .1
default.php를 삭제했지만 동작하지 않는다.
How to deploy Vue js on shared hosting? - Comprehensive view to Vue.js
- 위 문서에 따르면 vue.js를 deploy하는 것이 가능하다고 한다.
- deploy 방식이 잘못된 듯 하다.
1. Solve
npm run build
- 업로드 하려는 vue.js에서 빌드를 통해 dist 파일을 생성한다.
- 이 파일 내부에 있는 모든 파일들을 Hostinger의 public_html에 업로드 한다.
- 정상적으로 등록 완료
결과화면
- 도메인 이름까지 잘 등록되어 있다.
- …투두 리스트 외에도 구현했던 것 같은데 어디갔는지 모르겠다.
Issue .2
업데이트된 코드를 업로드 하기 위해 빌드를 실행시켰지만
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
라는 오류로 인해 업로드가 제대로 실행되지 않았다. 보아하니 asset의 크기가 너무 큰 것이 문제인 듯 하다.
2. Solve
우선 해결 방법은 다양하다. 그 중 가장 간단한 해결 방법은 webpack을 사용하는 것이다.
//package.json devdependencies
"vue-loader": "^15.7.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
- 위의 네가지를 추가하고 난 뒤
npm install을 하여 웹팩을 설치한다.
//webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: {
app: path.join(__dirname, "main.js"),
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [new VueLoaderPlugin()],
output: {
filename: "[name].js",
path: path.join(__dirname, "dist"),
},
};
- webpack.config.js 파일을 생성하여 위의 코드를 작성한다.
//vue.config.js
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.mode = 'production';
// Package file size configuration
config.performance = {
maxEntrypointSize: 10000000,
maxAssetSize: 30000000
}
}
},
- configureWebpack을 이용하여 위와 같이 작성한 뒤
npm run build를 하면, 정상적으로 빌드가 실행된다.
결과 2
- 기존에 만들었던 상태 그대로 잘 나온다.
- 그러나 디자인이 마음에 들지 않기 때문에 갈아엎을 예정이다.