---
# System prepended metadata

title: package vue and deploy on web server
tags: [Vue, Web server]

---

---
title: package vue and deploy on web server
tags: vue, web server
description: instruction of vue packaging and deploying
---

# Web server deployment
vue can simply use `npm run serve` to serve web service, but it is not recommanded for deploy environment. Because it doesn't support proxy and load balancer. In the following, web server using nginx, it's free open source. 

## Environment
With using micorservice architecture, we develop vue project inside the container. The below `vue_image` already has vue project in `/home/<vue_project>`.

```
$ docker run -it -d -p 10000:80 --name web_service vue_image bash
```

## Install Pre-request packages
Install pre-request packages in container. 
```
$ yum install nginx nodejs -y
```

### Package vue project
After packaging vue project, it will create `/home/<vue_project>/dist` folder. Packaged files will be saved inside.
```
$ cd /home/<vue_project>
$ npm install && npm run build
$ mv /home/<vue_project>/dist /home/web
```

`/home/web` directory look like below:

![image](https://hackmd.io/_uploads/rk_yZTLr6.png)

### Modify nginx config

```
$ vi /etc/nginx/nginx.conf
```

#### nginx.conf
modify location field, and revise root to packaged folder (`/home/web`), and revise index to file name (`index.html`).
```
    ...
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            root   /home/web;
            index  index.html;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }
    ...
```

### Start nginx web server

#### relaod nginx config
```
$ nginx -s reload
```

#### start nginx
```
$ nginx
```

#### start nginx with pid 1
```
$ nginx -g daemon off;
```

#### stop nginx
```
$ nginx -s stop
```

## 參考
* https://hackmd.io/@tN16s2COSmCKkIg6NfGrUQ/Hyf_SD-eY
* https://www.cnblogs.com/pxblog/p/15959628.html
* http://www.wuweigang.com/?id=329

## Thank you! :dash: 

You can find me on

- GitHub: https://github.com/shaung08
- Email: a2369875@gmail.com
