学习、工作和狗粮

简单构建前端集成开发(Mac Vue -> Ubuntu Nginx)

2018/01/24 Share

参考

上传代码到 coding.net

创建远程仓库&将本地代码上传到远程仓库

1
2
3
4
5
6
7
8
9
10
11
12
git config --global user.name "jiiiiiin"
git config --global user.email "jiiiiiin@yeah.net"

vue init webpack vue-webpack-tmpl
cd vue-webpack-tmpl
git init
touch README.md
git add README.md
git commit -m "first commit"
# 将本地代码上传到远程仓库
git remote add origin https://github.com/Jiiiiiin/vue-webpack-tmpl.git
git push -u origin master

如果使用的是ssh方式,避免permission denied(publickey),需要添加 ssh key 到远程服务器,把本地的 id_rsa.pub 中的内容,粘贴到 coding.net 上的账号设置区域就可以了。

可以参考SSH免密登录.md

下载项目到服务器

Mac安装Vagrant相关资料记录

  • clone 项目到Mac虚拟机上的Ubuntu服务器
    1
    2
    3
    4
    5
    6
    sudo apt-get update
    sudo apt-get -y git
    git clone https://github.com/Jiiiiiin/vue-webpack-tmpl.git
    # 之后客户机修改提交到远程仓库之后,就登录服务器更新项目即可完成同步
    git pull
    # ....

前端项目构建

在服务器拉取到master分支代码之后,可以就地进行构建。

Ubuntu环境安装node记录.md

部署项目到nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 拉了一个前端项目到此目录
/home/vagrant/project/vue-webpack-tmpl
# 构建
vagrant@ubuntu-xenial:~/project/vue-webpack-tmpl/dist$ pwd
/home/vagrant/project/vue-webpack-tmpl/dist
vagrant@ubuntu-xenial:~/project/vue-webpack-tmpl/dist$ ll
total 16
drwxrwxr-x 3 vagrant vagrant 4096 Jan 25 13:02 ./
drwxrwxr-x 9 vagrant vagrant 4096 Jan 25 13:02 ../
-rw-rw-r-- 1 vagrant vagrant 518 Jan 25 13:02 index.html
drwxrwxr-x 4 vagrant vagrant 4096 Jan 25 13:02 static/
vagrant@ubuntu-xenial:~/project/vue-webpack-tmpl/dist$

# 配置
vagrant@ubuntu-xenial:/etc/nginx/sites-enabled$ sudo su
root@ubuntu-xenial:/etc/nginx/sites-enabled# vim project.conf
server {
listen 80 default;
root /home/vagrant/project/vue-webpack-tmpl/dist;
}

# 修改当前目录下默认的default配置,取消默认server配置
server {
# listen 80 default_server;
# listen [::]:80 default_server;

listen 80;
listen [::]:80;

# 检查配置
root@ubuntu-xenial:/etc/nginx/sites-enabled# ll
total 12
drwxr-xr-x 2 root root 4096 Jan 25 13:14 ./
drwxr-xr-x 6 root root 4096 Jan 21 08:50 ../
lrwxrwxrwx 1 root root 34 Jan 21 08:50 default -> /etc/nginx/sites-available/default
-rw-r--r-- 1 root root 84 Jan 25 13:06 project.conf
root@ubuntu-xenial:/etc/nginx/sites-enabled# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
root@ubuntu-xenial:/etc/nginx/sites-enabled#

# 重启
sudo service nginx reload

在宿主机(mac)查看

简化部署流程

如果是极简项目,针对登录服务器、进入目录、拉取代码,可以通过下面的一条命令搞定:

如果写成脚本project_deploy

下一步需要将脚本chmod为可执行脚本:

1
2
3
4
chmod +x [脚本名称]

# 执行脚本
./[脚本名称]

如果开发的项目不过,可以将脚本放置到$PATH下,之后可以直接执行;

CATALOG
  1. 1. 参考
  2. 2. 创建远程仓库&将本地代码上传到远程仓库
  3. 3. 下载项目到服务器
  4. 4. 前端项目构建
  5. 5. 部署项目到nginx
  6. 6. 在宿主机(mac)查看
  7. 7. 简化部署流程