前端项目上线过程简记

安装git

可参考这篇文章
Linux下git的安装、配置、测试

nodejs配置

下载nodejs

wget https://nodejs.org/dist/v6.12.3/node-v6.12.3-linux-x64.tar.gz  

解压

tar -zxvf node-v6.12.3-linux-x64.tar.gz

移动到/usr/local目录下

 cd /usr/local/
 mv ~/node-v6.12.3-linux-x64 ./

配置环境变量

vim /etc/profile

输出以下内容

export NODE_HOME=/usr/local/node-v6.12.3-linux-x64
export PATH=$NODE_HOME/bin:$PATH

让其生效以下

source /etc/profile

安装webpack

 npm install webpack@1.15.0 -g --registry=https://registry.npm.taobao.org

克隆项目到本地

安装依赖

 npm install  --registry=https://registry.npm.taobao.org
# 腾讯云的镜像地址
#  npm install --registry http://mirrors.cloud.tencent.com/npm/

项目打包

npm run dist

注意在打包前注意添加转义字符，否则Linux上图片不会显示出来

配置nginx代理

主文件配置

vim  /usr/local/nginx/conf/nginx.conf

在server{}下添加 include vhost/*.conf;

在conf目录下创建vhost

由于没有购买域名所以只能用ip作为映射代理请求，故配置自己的ip.conf

server {
    
    
listen 80;
autoindex on;
server_name xxx;
access_log /usr/local/nginx/logs/access.log combined;
index index.html index.htm index.jsp index.php;
if ( $query_string ~* ".*[\;'\<\>].*" ){
    
    
        return 404;
        }

location = / {
    
    
        root /product/frontend/mmall-fe/dist/view;
        index index.html;
}

location ~ .*\.html$ {
    
    
        root /product/frontend/mmall-fe/dist/view;
        index index.html;
}



location ~ .*\.(js|css)?$ {
    
    
        root /product/frontend/mmall-fe;
}


location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
    
    
        root /product/frontend/mmall-fe;

        }

location ~ .*\.(js|css)?$ {
    
    
        proxy_pass http://101.34.114.164;
        expires 7d;
        }
}

启动nginx即可完成项目启动见到页面了