上传静态文件
登陆kim账号
创建目录/var/www/pages
修改权限sudo chmod 777 pages
现在我本地有一个vue项目,my_project,执行npm run build打包成静态文件
切换到项目的根目录下
执行sudo scp -r ./dist/* kim@49.235.172.41:/var/www/pages把dist内的文件全部上传到服务器的/var/www/pages目录下。
kim@VM-0-12-ubuntu:/var/www/pages$ ll
total 16
drwxrwxrwx 3 root root 4096 Feb 3 08:52 ./
drwxr-xr-x 5 root root 4096 Feb 3 08:47 ../
-rw-r--r-- 1 kim kim 512 Feb 3 08:52 index.html
drwxr-xr-x 6 kim kim 4096 Feb 3 08:52 static/
kim@VM-0-12-ubuntu:/var/www/pages$
配置nginx
sudo vi /etc/nginx/sites-available/default,把最开始的node示例项目替换掉。
现在的nginx配置为
location /catalog{
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_set_header Cookie $http_cookie;
proxy_pass http://127.0.0.1:3000;
}
location / {
root /var/www/;
index index.html;
}
刷新浏览器
后续
我们实现了一个静态页面的部署和一个node项目的部署,虽然只是简单的初步实现,但是初学用来练手还是挺合适的。更多的优化和改进要继续探索。
- history路由模式的vue项目部署
- 域名连接
- 实现https访问
参考
Ubuntu部署nodejs应用-Docker
Vue项目打包部署总结
pm2 使用教程
How To Set Up a Node.js Application for Production on Ubuntu 16.04