Webpack项目部署

第一步 准备webpack项目（以Vue项目为例）

1、准备本地开发环境

• 安装node.js（官网）
• 安装npm（官网）
• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、新建vue cli项目

npm install -g vue-cli //全局安装vue cli
vue init webpack my-project //安装vue webpack模板

cnpm install //安装node_modules

npm run dev //运行项目

3、准备服务器环境

• 安装nginx

sudo apt-get update //更新apt-get源
sudo apt-get install nginx

• 安装node.js（如果是更新参考这里）

sudo apt-get install nodejs

• 安装npm（如果是更新参考这里）

sudo apt-get install npm

• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、准备代码

• 将代码部署到服务器（可通过github.com或coding.net来进行代码托管）
  可以将项目代码放置在/var/www目录下

• 编译vue项目

npm run build  //将项目代码编译至/dist目录下

5、配置nginx文件

cd /etc/nginx/sites-available
cp default 

将配置成如下：

server {
    listen 80;

    root /var/www//dist;
    index index.html index.htm;

    # Make site accessible from http://localhost/
    server_name ;

    location / {
        
    }
}

接着给配置好的文件添加软链接

ln -sf /etc/nginx/sites-available/ /etc/nginx/sites-enabled

最后重启nginx sudo service nginx restart，在浏览器输入(your.domain.name)即可访问

---

参考目录：

• How to symlink a file in Linux?
• Deploy react-webpack to Digital Ocean with Nginx and Github
• How to know what program is listening on a given port?