---
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:


### 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: [e-mail]